D-Net

import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef, Input} from '@angular/core';

import 'rxjs/add/observable/fromEvent';

import 'rxjs/add/operator/delay';

import 'rxjs/add/operator/do';

@Directive({

  selector: '[click-outside-or-esc]'

})

export class ClickOutsideOrEsc implements OnInit, OnDestroy {

  private listening: boolean;

  public targetId = null;

  public escClose = true;

  @Output('clickOutside') clickOutside: EventEmitter<Object>;

  constructor(private _elRef: ElementRef) {

    this.listening = false;

    this.clickOutside = new EventEmitter();

  }

  ngOnInit() {

      this.subscriptions.push(Observable

        .fromEvent(document, 'click')

        .delay(1)

        .do(() => {

          this.listening = true;

        }).subscribe((event: MouseEvent) => {

          this.onGlobalClick(event);

        }));

      this.subscriptions.push(Observable

        .fromEvent(document, 'keydown')

        .delay(1)

        .do(() => {

          this.listening = true;

        }).subscribe((event: KeyboardEvent) => {

              target: (event.target || null),

              value: true

            });

          }

        }));

    }

  ngOnDestroy() {

      this.subscriptions.forEach((subscription: Subscriber<any>) => {

        subscription.unsubscribe();

      });

    }

    this.subscriptions = [];

  onGlobalClick(event: MouseEvent) {

    if (event instanceof MouseEvent && this.listening === true) {

          target: (event.target || null),

          value: false

        });

      } else {

        this.clickOutside.emit({

          target: (event.target || null),

          value: true

        });

      }

    }

  }

}