<parent-component />
parent-component {
  button {
    margin: 20px 0;
  }
}

child-component {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  background: #e5e5e5;
  list-style: none;
  align-items: center;

  .link {
    color: #888;
    text-decoration: none;
  }

  img {
    margin: 20px;
  }

  figure {
    margin: 0;
  }
}
View Compiled
const { Component, Input } = ng.core;
const { bootstrap } = ng.platform.browser;

interface Director {
  name: string,
  image: string,
  bio: string
};

@Component({
  selector: 'child-component',
  template: `
      <figure>
        <img src="{{ director.image }}" />
      </figure>
      <h2>
        <a href="{{ director.bio }}" target="_blank" class="link">
          {{ director.name }}
        </a>
      </h2>
  `
})
class ChildComponent {
  @Input() director: Object;
}

@Component({
  selector: 'parent-component',
  directives: [ ChildComponent ],
  template: `
    <div>
      <h1> {{ title }} </h1>
      <button 
        (click)="onButtonClick($event)" 
        *ngIf="!directors.length"
      >Click me!</button>
      <child-component
        *ngFor="let director of directors"
        [director]="director"
      ></child-component>
    </div>
  `
})
class ParentComponent {
  constructor(
    private directors: Director[] = [],
    private title: string = 'Parent component',
  ) {}
  
  onButtonClick(event) {
    this.directors = this.fetchDirectors();
  }
  
  fetchDirectors() {
    return [
      {name: 'George A. Romero',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/George_A._Romero'},
      {name: 'Tommy Wiseau',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Tommy_Wiseau'},
      {name: 'Lucio Fulci',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Lucio_Fulci'},
      {name: 'Uwe Boll',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Uwe_Boll'},
    ];
  }
}

bootstrap(ParentComponent);
View Compiled

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js