I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another overlay panel, the previously opened one should be hidden.
For reference, you can check out the code in stackblitz here.
Below is the snippet of the code:
<div class="dropdown">
<div 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() {
}
ngOnInit() {
}
@HostListener('document:click', ['$event']) clickedOutside($event) {
this.active = false;
}
toggle($event) {
$event.preventDefault();
$event.stopPropagation();
this.active = !this.active;
}
close() {
this.active = false;
}
}