Hide overlaypanel when I click outside the box or in the box Angular 4

Issue

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 always there, it is dissapear only when I click in button what I have writed.

Here is the link of the StackBlitz

I have like this the overlaPanel created.

<div class="dropdown">   
  <div (click)="toggle()" class="body">
    <ng-content select="[body]"></ng-content>
  </div>

  <div *ngIf="active" class="popup" >
    <ng-content select="[popup]"></ng-content>
  </div>    
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.popup {
  display: block;
  position: absolute;
  z-index: 1000;
}

export class OverlaypanelComponent implements OnInit {   
  active = false;

  constructor() {         
  }

  offClickHandler(event: any) {
    if (event['.body'] && event['.popup'] === true) {
      this.active = false;
    }
  }
  ngOnInit(): void {

  }

  toggle() {
    this.active = !this.active;
  }

  close() {
    this.active = !this.active;
  }

}

And this is when I call this component

 <app-overlaypanel>
        <div body [ngClass]="[getBackgroundColorClass(),clazz]" class="fa fa-pencil-square-o edit-block"></div>
        <div class="overlayPopup" popup>
          <div class="dropdown-menu-item" (click)="openTechnicalEditDialog({cluster: cluster, type: clazz})">Edit</div>
          <div class="dropdown-menu-item" (click)="delete()">Delete</div>
          <div class="dropdown-menu-item" (click)="openTechnicalEditDialog({appendToParentId: cluster.id})" *ngIf="cluster.level <= 9">Append</div>
          <div

 class="dropdown-menu-item" (click)="clicked.emit()">Assign</div>
    </div>
  </app-overlaypanel>

Solution

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

Answered By - Chellappan வ