ngx-admin error when using multiple popovers

Question

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 ?

Answer 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

Answer 2

If you have multiple NbPopoeverDirectives you can get them with @ViewChildren so try the follwing code:

@ViewChildren(NbPopoeverDirective) popovers: QueryList<NbPopoeverDirective>;

...

hidePopups(){
  if(this.popovers){
     this.popovers.forEach(popover => {
        popove.hide();
      });
  }
}