dspace-angular/src/app/shared/utils/click-outside.directive.ts

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[dsClickOutside]'
})
/**
 * Directive to detect when the users clicks outside of the element the directive was put on
 */
export class ClickOutsideDirective {
  /**
   * Emits null when the user clicks outside of the element
   */
  @Output()
  public dsClickOutside = new EventEmitter();

  constructor(private _elementRef: ElementRef) {
  }

  @HostListener('document:click')
  public onClick() {
    const hostElement = this._elementRef.nativeElement;
    const focusElement = hostElement.ownerDocument.activeElement;
    const clickedInside = hostElement.contains(focusElement);
    if (!clickedInside) {
      this.dsClickOutside.emit(null);
    }
  }
}