Hide Overlaypanel When I Click Outside The Box Or In The Box Angular 4

I have created an OverlayPanel like component so there I can put more clicks or something else. But when I click outside the overlay or in the overlay this does not exit stays alwa

Solution 1:

If you want to close the drop down when you click outside of your menu you can use host listener to know whether you clicked outside or not

@HostListener('document:click', ['$event']) clickedOutside($event){

    this.active=false;
  }

I have attached the example check this out: https://stackblitz.com/edit/angular-5p5d1b

Solution 2:

You can use ng-click-outside module as described here https://www.npmjs.com/package/ng-click-outside working with me fine in angular 8