import { Component } from '@angular/core' ; import { Conduit , ConduitZone , ConduitZoneComponent } from '@ux-aspects/ux-aspects' ; import { BehaviorSubject } from 'rxjs' ; @ Component ( { selector : 'app-toolbar' , templateUrl : './toolbar/toolbar.component.html' , styleUrls : [ './toolbar/toolbar.component.css' ] , providers : [ ConduitZone ] } ) export class ToolbarComponent extends ConduitZoneComponent { zoneId : string = 'toolbar-zone' ; acceptsInput : boolean | string [ ] = true ; producesOutput : boolean = true ; @ Conduit ( { id : 'search' , acceptsInput : false , changeDetection : ( ) => false } ) search = new BehaviorSubject ( '' ) ; @ Conduit ( { id : 'show-zones' } ) showZones = new BehaviorSubject ( false ) ; clear ( ) { this . search . next ( '' ) ; } toggle ( ) { this . showZones . next ( ! this . showZones . value ) ; } }