Open eldhoseelias opened 4 years ago
I'm facing the same problem when using multiple popover in one screen. My current work arround is to CLOSE ALL POPOVER WHEN ONE POPOVER IS CLICKED.
What I'm doing is:
@ViewChildren(NbPopoverComponent)
public popups: QueryList<NbPopoverComponent>;
public closePopover(): void {
if (!this.popups) {
return
}
for (const popup of this.popups) {
popup.hide();
}
}
This is the current workaround. But IMO, one popover should have its own id, we can find the specific popover by using its id and hide it.
It feels like two years later popups still don't have an ID? I need to control the appearance of multiple popovers programatically, or at least data-bind their appearance.
Here is a solution for this issue I hacked up today. Use nbPopoverContext
inb your template and filter the popovers by that !
Template:
<div nbPopover="Token Name is required." nbPopoverTrigger="noop" nbPopoverContext="tokenName"> ......
Controller:
export class YourClass {
@ViewChildren(NbPopoverDirective) popovers: QueryList<NbPopoverDirective>;
// and now you can use this magic function for your comfort !
setPopoverVisible(id : string, show: boolean, hideAfter? : number) {
let popovers : Array<NbPopoverDirective> = this.popovers["_results"]
let onePopover : NbPopoverDirective = popovers.find(element => element.context == id)
show ?
onePopover.show() :
onePopover.hide()
if (show == true && hideAfter) {
setTimeout(() => {
onePopover.hide();
}, hideAfter);
}
}
}
Took me a day to figure out, totally worth it though.
Issue type
I'm submitting a ... (check one with "x")
Issue description
Current behavior:
Expected behavior:
Steps to reproduce:
Related code:
Other information:
npm, node, OS, Browser
Angular, Nebular