import { ChangeDetectionStrategy , Component } from '@angular/core' ; import { Observable , Subject } from 'rxjs' ; import { switchMap } from 'rxjs/operators' ; import { Hero } from '../hero' ; import { HeroService } from '../hero.service' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'app-hero-search' , templateUrl : './hero-search.container.html' , } ) export class HeroSearchContainerComponent { private searchTerms : Subject < string > = new Subject ( ) ; heroes$ : Observable < Hero [ ] > = this . searchTerms . pipe ( switchMap ( term => this . heroService . searchHeroes ( term ) ) ) ; constructor ( private heroService ) { } search ( term ) { this . searchTerms . next ( term ) ; } }