'ngx-admin error when using multiple popovers

I am using ngx-admin NbPopover, 4 attachments per page. I want to close the event when the event is finished.

@ViewChild (NbPopoverDirective) popverDirective: NbPopoverDirective;
this.popverDirective.hide();

I can only use one of them. others are not working. Could your help ?

Solution 1:^[1]

If you have multiple NbPopoverDirective, you can add a selector over the element holding the directive, and use the "read" option of @ViewChild to get the NbPopoverDirective

Component.html:

<nb-action #transferAction [nbPopover]="transferPopoverComponent"></nb-action>
<nb-action #orderAction  [nbPopover]="orderPopoverComponent"></nb-action>

Component.ts:

  @ViewChild("transferAction", { read: NbPopoverDirective }) transferPopover: NbPopoverDirective;
  @ViewChild("orderAction", { read: NbPopoverDirective }) orderPopover: NbPopoverDirective;

See how we tag the nb-actions with "#transferAction" and use this to select the ViewChild, then read the inner directive

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	YohjiNakamoto

'ngx-admin error when using multiple popovers

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]