Angular 4 вложенных компонента

Надеюсь, с тобой все хорошо. Я новичок в typeScript и angular 4, и я столкнулся с проблемой. Я хочу использовать один компонент в другом компоненте. Данные будут доступны через Http с помощью метода get и поступят в виде массива объектов в родительском компоненте, и я хочу использовать ngFor для повторения дочернего компонента на основе получения данных от родительского компонента.

Следующий код - дочерний 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() {
  }

вот мой дочерний компонент 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>

Родительский 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
    });

  }

}

и, наконец, родительский 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>

Буду признателен, если вы поможете мне разобраться в этой проблеме.