import { Directive , HostListener , OnDestroy , OnInit } from '@angular/core' ; import { ObOffCanvasService } from './off-canvas.service' ; import { filter , takeUntil } from 'rxjs/operators' ; import { ObGlobalEventsService } from '../global-events/global-events.service' ; import { Subject } from 'rxjs' ; @ Directive ( { selector : '.ob-off-canvas-backdrop' } ) export class ObOffCanvasBackdropDirective implements OnInit , OnDestroy { private readonly unsubscribe = new Subject ( ) ; constructor ( private readonly offCanvas , private readonly globalEventsService ) { } @ HostListener ( 'click' ) close ( ) { this . offCanvas . open = false ; } ngOnInit ( ) { this . globalEventsService . keyUp$ . pipe ( filter ( event => event . key === 'Escape' ) , filter ( ( ) => this . offCanvas . open ) , takeUntil ( this . unsubscribe ) ) . subscribe ( ( ) => this . close ( ) ) ; } ngOnDestroy ( ) { this . unsubscribe . next ( ) ; this . unsubscribe . complete ( ) ; } }