angular clickOutside directive

click.outside.directive.ts

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

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    private readonly startTime: number;

    constructor(private elementRef: ElementRef) {
        this.startTime = new Date().getTime();
    }

    @Output('clickOutside') clickOutside: EventEmitter<any> = new EventEmitter();

    @HostListener('document:click', ['$event']) onMouseEnter(evt) {
        if (new Date().getTime() - this.startTime > 80) {
            // make sure it doesn't fire immediately.
            // like when clicking another element to show component with this directive.
            const targetElement = evt.target;
            const insideRect: ClientRect = this.elementRef.nativeElement.getBoundingClientRect();
            const cX = evt.clientX;
            const cY = evt.clientY;
            const clickedInsideRect = (
                cX >= insideRect.left && cX <= insideRect.left + insideRect.width
                && cY >= insideRect.top && cY <= insideRect.top + insideRect.height
            );
            // doesn't always work since element might be removed from dom when clicked
            // const clickedInside = this.elementRef.nativeElement.contains(targetElement);
            if (!clickedInsideRect) {
                this.clickOutside.emit(null);
            }
        }
    }

}