import { Component , OnDestroy , OnInit } from '@angular/core' ; import { Store } from '@ngrx/store' ; import { Observable , of , Subject } from 'rxjs' ; import { debounceTime , distinctUntilChanged , filter , map , takeUntil } from 'rxjs/operators' ; import * as fromStore from '../store/header.reducer' ; import * as fromSelector from '../store/header.selectors' ; import { searchProduct , requestLoadProducts } from './../../products/store/product.actions' ; @ Component ( { selector : 'app-header' , templateUrl : './header.component.html' , styleUrls : [ './header.component.scss' ] } ) export class HeaderComponent implements OnInit , OnDestroy { searchQuery = '' ; cartCount$ : Observable < number > ; destroySub = new Subject ( ) ; constructor ( private store ) { this . cartCount$ = this . store . select ( fromSelector . cartCount ) ; } ngOnInit ( ) { } watchSearch ( ) { of ( this . searchQuery ) . pipe ( map ( value => value . trim ( ) ) , debounceTime ( 2000 ) , distinctUntilChanged ( ) , takeUntil ( this . destroySub ) ) . subscribe ( query => this . store . dispatch ( searchProduct ( { searchQuery : query } ) ) ) ; } ngOnDestroy ( ) { this . destroySub . next ( true ) ; this . destroySub . complete ( ) ; } }