Dropdown closing by clicking anywhere else

project/src/app/shared/dropdown.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, HostListener, HostBinding } from '@angular/core';
-
+import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
+     
 @Directive({
   selector: '[appDropdown]'
 })
 export class DropdownDirective {
   @HostBinding('class.open') isOpen = false;
-
-  @HostListener('click') toggleOpen() {
-    this.isOpen = !this.isOpen;
+  @HostListener('document:click', ['$event']) toggleOpen(event: Event) {
+    this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false;
   }
+  constructor(private elRef: ElementRef) {}
 }