Let's say we use angular 5 or greater and we want to track clicks outside of specific elements. And even more. Sometimes we need to track outside clicks which happened only on a specific area.
For this case we can create and utilize the following directive for this purpose:
import {
  Directive,
  ElementRef,
  Renderer2,
  OnInit,
  Input,
  Output,
  EventEmitter
} from '@angular/core';

@Directive({
  selector: '[appOutsideClickListener]'
})
export class OutsideClickListenerDirective implements OnInit {

  constructor(
    private _elementRef: ElementRef,
    private _renderer: Renderer2
  ) {}

  /**
   * @description This is an optional input.
   * We will use it if we want to track when "outside" click happened in a specific element.
   */
  @Input() public trackEl: HTMLElement;

  @Output() public clickOutside = new EventEmitter();

  ngOnInit() {
    this._renderer.listen(this.trackEl || document, 'click', (event: Event) => {
      this._handleClick(event);
    });
  }

  private _handleClick(event: Event) {
    const clickedInside = this._elementRef.nativeElement.contains(event.target);
    if (event['which'] !== 3 && !clickedInside) {
      this.clickOutside.emit(event);
    }
  }
}
And we can apply this directive in following way:
<div appOutsideClickListener (clickOutside)="someOutsideClickHandler()">
  outside clicks need to be tracked for this div
</div>
And if we want to handle somehow click on another element, then we can you appOutsideClickListener as follows:
<div appOutsideClickListener (clickOutside)="someOutsideClickHandler()" [trackEl]="someDomElement">
  click on a specific element needs to be tracked for this div
</div>