Angular4 dropdown directive for bootstrap - enhanced

dropdown.directive.ts

import { Directive, HostListener, HostBinding, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective implements OnDestroy {
  private timer = null;
  private isMouseInside: boolean = false;
  @HostBinding('class.open') isOpen: boolean = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }

  @HostListener('document:click') onDocumentClick() {
    if (!this.isMouseInside)
      this.isOpen = false;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.isMouseInside = false;
    this.scheduleTimeout();
  }  

  @HostListener('mouseenter') onMouseEnter() {
    this.isMouseInside = true;
    this.cancelTimeout();
  }

  scheduleTimeout() {
    this.cancelTimeout();

    this.timer = setTimeout(() => {
      this.timer = null;
      this.isOpen = false;
    }, 500);
  }

  cancelTimeout() {
    let t = this.timer;
    this.timer = null;

    if (t !== null)
      clearTimeout(t);
  }

  ngOnDestroy() {
    this.cancelTimeout();
  }

  // not functional; blur
  // @HostListener('blur') removeOpen() {
  //   this.isOpen = false;
  // }

  // note: not sufficient for dropdown button
  // @HostListener('mouseleave') removeOpen() {
  //   this.isOpen = false;
  // }
}

@vbelcik thank you for sharing this code!!