ngx-bootstrap popover is not working properly

Question

I am using ngx-bootstrap popover. I want the popover should open on hover, and all opened ones should be closed if new one is opened.

working example

As per requirement I want above sample should controlled by parent component and target popover lies in child component. I need this for modularity requirement

Demo ngFor in child component html this is wrong demo

Updated demo ngFor in parent component html

parent component

export class DemoPopoverFourDirectionsComponent  implements 

AfterViewInit{
  @ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;

  ngAfterViewInit() {
    this.popovers.forEach((popover: PopoverDirective) => {
      popover.onShown.subscribe(() => {
        this.popovers
        .filter(p => p !== popover)
        .forEach(p => p.hide());
      });
    });
  }

varArr=[1,2,3,4]

}

In popover there are buttons which need to be clicked. If I use triggers="mouseenter:mouseleave" I cannot click buttons inside the popover

Answer 1

I change your code and I hope it's what you needed

here

UPDATE:

here is the final code