Angular Click Outside Directive

click-outside.directive.ts

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

@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
  @Output() appClickOutside: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event', '$event.target'])
  public onClick($event, targetElement) {
    const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!isClickedInside) {
      this.appClickOutside.emit($event);
    }
  }
}

example.html

<div class="menu" (click)="open()">
  ...
  <div class="options" *ngIf="showList" (appClickOutside)="close($event)">
    ...
  </div>
</div>

Thanks for this! Found it pretty useful.

In this Directive problem is when my drop down is closed and I click any when in my body this directive continuously emitting events. it cause performance issue. can we solved it?