Multiple nbPopover in a html page and hide function works only for first item. its not working for rest of them

[eldhoseelias]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

<div *ngFor="items of Items">
<button [nbPopover]="templateRef"  #p="ngbPopover"  nbPopoverPlacement="left" type="button" shape="round" nbButton status="danger" >
                <nb-icon icon="trash"></nb-icon>
              </button>

              <ng-template #templateRef>
                <nb-card class="mb-0">
                  <nb-card-header>Delete</nb-card-header>
                  <nb-card-body >
                    <span>Are you sure...! Do you want to delete the clinic. ?</span>
                  </nb-card-body>
                  <nb-card-footer>
                    <div class="modal-footer-btn">
                      <button type="button"  shape="round"  nbButton  (click)="closePopover()" status="basic">Cancel</button>
                      <button type="button" shape="round" class="ml-20" nbButton (click)="delete(id)" status="primary"
                        >Delete</button>
                    </div>
                  </nb-card-footer>
                </nb-card>
              </ng-template>
</div>

Other information:

npm, node, OS, Browser

<!--
node v10.15.2
 npm  6.13.1
OS:  macOS Mojave
Browser: Microsfot Edge
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[redplane]

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.

[nikita-fuchs]

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.

[nikita-fuchs]

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.