import { ChangeDetectionStrategy , Component , EventEmitter , Input , OnDestroy , OnInit , Output , } from '@angular/core' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { Hero } from '../hero' ; import { HeroSearchPresenter } from './hero-search.presenter' ; @ Component ( { selector : 'app-hero-search-ui' , templateUrl : './hero-search.component.html' , styleUrls : [ './hero-search.component.css' ] , changeDetection : ChangeDetectionStrategy . OnPush , providers : [ HeroSearchPresenter ] , } ) export class HeroSearchComponent implements OnDestroy , OnInit { @ Input ( ) heroes : Hero [ ] ; @ Input ( ) title : string ; @ Output ( ) search : EventEmitter < string > = new EventEmitter ( ) ; private destroy : Subject < void > = new Subject ( ) ; constructor ( private presenter ) { } ngOnInit ( ) { this . presenter . searchTerms$ . pipe ( takeUntil ( this . destroy ) ) . subscribe ( term => this . search . emit ( term ) ) ; } ngOnDestroy ( ) { this . destroy . next ( ) ; this . destroy . complete ( ) ; } searchFor ( term ) { this . presenter . search ( term ) ; } }