Angular 4 nested components

Question

Hope you are well. I am quite new in typeScript and angular 4 and I have faced with an issue. I want to use one component in another component. The data will be accessible through Http with get method and comes in array of object in parent component and I want to use ngFor to repeat child component based on receiving data from parent component.

Following code is child component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  styleUrls: ['./app-card.component.css']
})
export class AppCardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

here is my child component.html

<mat-card class="pt-3">
  <mat-card-header class="text-truncate pb-2">
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg">
    <mat-card-title class="mt-2">{{pro.name}}</mat-card-title>
  </mat-card-header>
</mat-card>

Parent component.ts

import { Component, OnInit } from '@angular/core';
import { FeaturedService } from "../services/featured.service";


@Component({
  selector: 'app-collection',
  templateUrl: './collection.component.html',
  styleUrls: ['./collection.component.css']
})
export class CollectionComponent implements OnInit {

  cc;

  constructor(private featured: FeaturedService) { }

  ngOnInit() {
    this.featured.getAll().subscribe(results => {
      this.cc= results
    });

  }

}

and finally parent html

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card></app-card>
          </div>
        </div>

I do appreciate if you can help me to sort this issue out.

did you verified that the results coming from Http is correct ? — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Nov 2, 2017 at 16:33

Mohamed Ali RACHID · Accepted Answer · 2017-11-02 16:39:32Z

1

use @Input to pass the pro from the parent to child

in the child component :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  styleUrls: ['./app-card.component.css']
})
export class AppCardComponent implements OnInit {

  @Input('pro') pro : any;
  constructor() { }

  ngOnInit() {
  }

in the parent component :

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card [pro]="pro" ></app-card>
          </div>
        </div>

answered Nov 2, 2017 at 16:39

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amal Over a year ago

By the way, just an fyi, you only need to explicitly specify the 'alias name' of the property within the paranthesis when they are different from what's used within the component. So this, @Input('pro') pro : any; could be like this: @Input() pro : any;.

Mohamed Ali RACHID Over a year ago

yes i know bro :) , i wrote it in that way , so he can know that the name of the variable can be different to the name of the input in html , thank you anyway @amal for your reply :)

Sajeetharan · Accepted Answer · 2017-11-02 16:36:31Z

0

You need to pass it as input

And use @input attribute on your child component

answered Nov 2, 2017 at 16:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

amal · Accepted Answer · 2017-11-02 16:38:38Z

You can use transclusion.

Parent html,

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card>{{ pro.name }}</app-card>
          </div>
        </div>

child html,

<mat-card class="pt-3">
  <mat-card-header class="text-truncate pb-2">
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg">
    <mat-card-title class="mt-2">
      <ng-content></ng-content>
    </mat-card-title>
  </mat-card-header>
</mat-card>

Or you can go with declaring an @Input property as suggested in other answers

Collectives™ on Stack Overflow

Angular 4 nested components

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related