How to detect click outside of an element in Angular?

Question

This div will be dynamically shown on the page as an east panel when the open panel button is clicked. The bool showEastPanel variable

Answer 1

you can do something like this

  @HostListener('document:mousedown', ['$event'])
  onGlobalClick(event): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
        // clicked outside => close dropdown list
     this.isOpen = false;
     }
  }

and use *ngIf=isOpen for the panel