import { Component , OnDestroy , OnInit } from '@angular/core' ; import { Facet , FacetDeselect , FacetDeselectAll , FacetService } from '@ux-aspects/ux-aspects' ; import { filter , takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; @ Component ( { selector : 'my-custom-facet-component' , templateUrl : './sample-facet-component.component.html' , styleUrls : [ './sample-facet-component.component.less' ] } ) export class SampleCustomFacetComponent implements OnInit , OnDestroy { expanded : boolean = true ; facets : Facet [ ] = [ new Facet ( 'Components' , { checked : false } ) , new Facet ( 'Charts' , { checked : false } ) , new Facet ( 'CSS' , { checked : false } ) ] ; private _onDestroy = new Subject < void > ( ) ; constructor ( private _facetService ) { } ngOnInit ( ) { this . _facetService . events$ . pipe ( filter ( event => event instanceof FacetDeselect ) , takeUntil ( this . _onDestroy ) ) . subscribe ( ( event ) => { event . facet . data . checked = false ; } ) ; this . _facetService . events$ . pipe ( filter ( event => event instanceof FacetDeselectAll ) , takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => { this . facets . forEach ( facet => facet . data . checked = false ) ; } ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } updateFacet ( facet , selected ) { facet . data . checked = selected ; if ( selected === true && ! this . _facetService . isSelected ( facet ) ) { this . _facetService . select ( facet ) ; } if ( selected === false && this . _facetService . isSelected ( facet ) ) { this . _facetService . deselect ( facet ) ; } } }