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);