I am facing a challenge where I need to trigger a popup when a button is clicked. There can be multiple buttons, each with its own overlay popup, and these popups should close when clicking outside of them. Currently, I am using TemplateRef (#toggleButton in my case) to open the popups, but it is only working for the first button and opens all popups simultaneously. Any assistance on this matter would be highly appreciated.
Feel free to check out the stackblitz link provided: https://stackblitz.com/edit/angular-d8tnwg?file=src/app/app.component.ts
Here is the HTML code:
<ng-container>
<tr>
<td class="custom-td" style="overflow:visible;">
<button #toggleButton class="icon-info" (click)="showTooltip()"></button>
<div #menu class="overlay-text" [ngClass]="status ? 'open' : ''">
<p>This is a placeholder text and will be copied
if you click on the button!</p>
<div class="form-group">
<input type="text">
<button class="icon-filecopy"></button>
</div>
</div>
</td>
</tr>
<tr>
<td class="custom-td" style="overflow:visible;">
<button #toggleButton class="icon-info" (click)="showTooltip()"></button>
<div #menu class="overlay-text" style="background-color: yellow" [ngClass]="status ? 'open' : ''">
<p>This is a placeholder text and will be copied
if you click on the button!</p>
<div class="form-group">
<input type="text">
<button class="icon-filecopy"></button>
</div>
</div>
</td>
</tr>
<tr>
<td class="custom-td" style="overflow:visible;">
<button #toggleButton class="icon-info" (click)="showTooltip()"></button>
<div #menu class="overlay-text" style="background-color: red" [ngClass]="status ? 'open' : ''">
<p>This is a placeholder text and will be copied
if you click on the button!</p>
<div class="form-group">
<input type="text">
<button class="icon-filecopy"></button>
</div>
</div>
</td>
</tr>
</ng-container>
And here is the TypeScript code:
status: boolean = false;
@ViewChild("toggleButton") toggleButton: QueryList<ElementRef>;
@ViewChild("menu") menu: QueryList<ElementRef>;
constructor(private renderer: Renderer2) {
this.renderer.listen("window", "click", (e: Event) => {
console.log("click outside");
if (
e.target !== this.toggleButton.nativeElement &&
e.target !== this.menu.nativeElement
) {
this.status = false;
}
});
}
showTooltip() {
this.status = !this.status;
}
}