Angular 4 - wyświetlanie obiektów jako komponenty

Zacząłem naukę Angular 4. Pobieram z API tablicę obiektów:

[
{ id: 1, name: "one" },
{ id: 2, name: "two" }
]

Mam komponent HomePageComponent, który korzysta z usługi ApiService i pobiera wyżej wymienioną tablicę obiektów. Do wyświetlenia obiektu służy ObjectComponent, który w przeglądarce wygląda jak kafelek znany z Windowsa 8, 10. Jak w wewnątrz HomeComponent mogę dynamicznie dodać wczytane obiekty, a więc dwa ObjecComponent'y? Chodzi mi o to aby HTML przed wczytaniem API:

<app-home></app-home>

został przekształcony po wczytaniu API:

<app-home> <app-object> ... </app-object> <app-object> ... </app-object> </app-home>

ngIf + ngFor

<div *ngFor='let data of yourDataArray'>
  <app-object (yourDataInput)='data'></app-object>
</div>

ew

<div *ngFor='let data of yourDataArray'>
  <app-object (id)='data.id' (name)='data.name'></app-object>
</div>

ew

class Foo {
  constructor(public id, public name) {}
}

@Component({
  selector: 'foo-comp'
  template: `id: {{ data.id }}, name: {{ data.name }}`
})
class FooComponent {
  @Input() public data;
}

@Component({
  template: `
    <div *ngFor='foo of foos'>
      <foo-comp (data)='foo'></foo-comp>
    </div>
  `
})
class HomeComponent {
  public foos: Foo[] = [];

  constructor(http: Http) {
    http.get('your-fancy-url').map(res => res.json()).subscribe(response => this.foos = response);
  }
}

ew

class Foo {
  constructor(public id, public name) {}
}

interface FoosResponse {
  foos: Foo[];
}

@Component({
  selector: 'foo-comp'
  template: `id: {{ data.id }}, name: {{ data.name }}`
})
class FooComponent {
  @Input() public data;
}

@Component({
  template: `
    <div *ngFor='foo of foos'>
      <foo-comp (data)='foo'></foo-comp>
    </div>
  `
})
class HomeComponent {
  public foos: Foo[] = [];

  constructor(http: Http) {
    http.get<FoosResponse>('your-fancy-url').subscribe(data => this.foos = data.foos);
  }
}

Dzięki! O takie coś mi właśnie chodziło.