click-outside

gistfile1.txt

  constructor(private elementRef: ElementRef, private ngbPopover: NgbPopover,
              private ngZone: NgZone, private cd: ChangeDetectorRef, private renderer: Renderer2) {
  }

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      this.listener = this.renderer.listen('document', 'click', (event) => {
        this.closePopoverOnClickOutside(event);
      });
    });
  }

  ngOnDestroy() {
    this.listener();
  }

  private closePopoverOnClickOutside(event: MouseEvent): void {
    // Popover is open
    if (this.ngbPopover && this.ngbPopover.isOpen()) {
      // Not clicked on self element
      if (!this.elementRef.nativeElement.contains(event.target)) {
        // Hacking typescript to access private member
        const popoverWindowRef: ComponentRef<NgbPopoverWindow> = (this.ngbPopover as any)._windowRef;
        // If clicked outside popover window
        if (!popoverWindowRef.location.nativeElement.contains(event.target)) {
          this.ngbPopover.close();
          this.cd.detectChanges(); // detect changes
        }
      }
    }
  }

ng-bootstrap/ng-bootstrap#933