Angular switchMap on observable never triggers -

i want implement search component in angular tutorial.

problem :

the search method fires , modifies searchterms: subject<string> switchmap never triggers.

code:

imports

import { component, oninit } '@angular/core';  import { searchservice } "./search.service";  import { observable }        'rxjs/observable'; import { subject }           'rxjs/subject';  // observable class extensions import 'rxjs/add/observable/of';  // observable operators import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/debouncetime'; import 'rxjs/add/operator/distinctuntilchanged';  import {suggest} "./suggest"; 

decorator

@component({   selector: 'search-engine',   templateurl: 'search-engine.component.html' }) 

component

export class searchenginecomponent implements oninit {    suggestions: observable<suggest[]>;   private searchterms = new subject<string>();    constructor(private searchservice: searchservice) {  }    ngoninit(): void {     this.suggestions = this.searchterms       .debouncetime(300)       .distinctuntilchanged()       .switchmap(term => {         console.log(term);         return observable.of<suggest[]>([]);       })       .catch(error => {         console.log(error);         return observable.of<suggest[]>([]);       });   }    search(term: string): void {     this.searchterms.next(term);   } } 

html

<input #searchbox id="search-box" (keyup)="search(searchbox.value)"> 

you have subscribe observable, if don't subscribe, nothing happens.

edit:

there's case can declare , observable in view , subscribe implicitly via async pipe, happening here:

<div id="search-component">   <h4>hero search</h4>   <input #searchbox id="search-box" (keyup)="search(searchbox.value)" />   <div>     <div *ngfor="let hero of heroes | async"          (click)="gotodetail(hero)" class="search-result" >       {{hero.name}}     </div>   </div> </div> 

more on async pipe here