import { Component , OnInit } from '@angular/core' ; import { IMovie } from './movie' ; import { MovieService } from './movie.service' ; import { MovieParameterService } from './movie-parameter.service' ; @ Component ( { templateUrl : './movie-list.component.html' , styleUrls : [ './movie-list.component.css' ] } ) export class MovieListComponent implements OnInit { pageTitle = 'Movie List' ; filteredMovies : IMovie [ ] ; movies : IMovie [ ] ; errorMessage : string ; get listFilter ( ) : string { return this . movieParameterService . filterBy ; } set listFilter ( value ) { this . movieParameterService . filterBy = value ; this . filteredMovies = this . performFilter ( this . listFilter ) ; } get showImage ( ) : boolean { return this . movieParameterService . displayPosters ; } set showImage ( value ) { this . movieParameterService . displayPosters = value ; } constructor ( private movieService , private movieParameterService ) { } ngOnInit ( ) { this . getMovies ( ) ; } getMovies ( ) { this . movieService . getMovies ( ) . subscribe ( { next : ( movies ) => { this . movies = movies ; this . filteredMovies = this . performFilter ( this . listFilter ) ; } , error : err => this . errorMessage = err } ) ; } performFilter ( filterBy ) { if ( filterBy ) { filterBy = filterBy . toLocaleLowerCase ( ) ; return this . movies . filter ( ( movie ) => movie . title . toLocaleLowerCase ( ) . indexOf ( filterBy ) !== - 1 ) ; } else { return this . movies ; } } toggleImage ( ) { this . showImage = ! this . showImage ; } }