Allow only one ngx-bootstrap Popover at the time.

component.html

<button
  type="button"
  class="btn btn-default btn-secondary"
  popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  popoverTitle="Popover on top"
  placement="top"
>
  Popover on top
</button>

component.ts

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap/popover';

@Component({
  selector: 'demo-popover-four-directions',
  templateUrl: './four-directions.html'
})
export class DemoPopoverFourDirectionsComponent  implements AfterViewInit{
  @ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;

  ngAfterViewInit() {
    // NOTE: Rember to take care of unsubscribing when component / directive is destroyed
    this.popovers.forEach((popover: PopoverDirective) => {
      popover.onShown.subscribe(() => {
        this.popovers
        .filter(p => p !== popover)
        .forEach(p => p.hide());
      });
    });
  }
}