Click outside Angular directive

click-outside.directive.ts

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

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

  constructor(private elementRef: ElementRef) {}

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

Usage:

  <button (click)="show = !show; $event.stopPropagation()">
    New movie
  </button>

  <div *ngIf="show" class="drop-down" (clickOutside)="show = false">
    <!-- Content here -->
  </div>