import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { Filter , FilterRemoveAllEvent , FilterService } from '@ux-aspects/ux-aspects' ; import { filter as rxFilter , takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; @ Component ( { selector : 'ux-filter-custom' , templateUrl : './sample-filter.component.html' , styleUrls : [ './sample-filter.component.less' ] } ) export class SampleFilterCustomComponent implements OnInit , OnDestroy { @ Input ( ) filters : Filter [ ] = [ ] ; @ Input ( ) initial : Filter ; selected : Filter ; private _onDestroy = new Subject < void > ( ) ; constructor ( private _filterService ) { _filterService . events$ . pipe ( takeUntil ( this . _onDestroy ) , rxFilter ( event => event instanceof FilterRemoveAllEvent ) ) . subscribe ( ( ) => this . removeFilter ( ) ) ; _filterService . filters$ . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( filters => { if ( this . selected && filters . indexOf ( this . selected ) === - 1 ) { this . removeFilter ( ) ; } } ) ; } ngOnInit ( ) { this . selected = this . initial ; this . _filterService . filters$ . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( filters => { filters . forEach ( filter => { if ( this . filters . indexOf ( filter ) !== - 1 ) { this . selected = filter ; } } ) ; } ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } removeFilter ( ) { this . _filterService . remove ( this . selected ) ; this . selected = this . initial ; } selectFilter ( filter ) { this . removeFilter ( ) ; this . selected = filter ; this . _filterService . add ( this . selected ) ; } }