Exercise Goal

Create a modular components using stateful and stateless component architecture.

Tasks

  1. The AppComponent class has a films property that is an array of Film objects. Create a new FilmListComponent that accepts the array of Film objects. Be sure to decorate the films property using the @Input() decorator.
  2. Create a new FilmDetailComponent that accepts a single Film object.
  3. Inside the template for the FilmListComponent use the NgFor structural directive to iterate over the films and to display the <app-film-detail> component.
  4. Inside the template for the FilmDetailComponent display the title and opening property values of the film object using string interpolation.

Exercise

Exercise Problem