fix(popover): open popover correctly from lifecycle hooks

src/popover/popover.spec.ts

@@ -9,7 +9,8 @@ import {
   Injectable,
   OnDestroy,
   TemplateRef,
-  ViewContainerRef
+  ViewContainerRef,
+  AfterViewInit
 } from '@angular/core';
 
 import {Key} from '../util/key';
@@ -73,7 +74,7 @@ describe('ngb-popover', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent, TestOnPushComponent, DestroyableCmpt],
+      declarations: [TestComponent, TestOnPushComponent, DestroyableCmpt, TestHooksComponent],
       imports: [NgbPopoverModule],
       providers: [SpyService]
     });
@@ -349,6 +350,14 @@ describe('ngb-popover', () => {
       fixture.detectChanges();
       expect(getWindow(fixture.nativeElement)).toBeNull();
     });
+
+    it('should open popover from hooks', () => {
+      const fixture = TestBed.createComponent(TestHooksComponent);
+      fixture.detectChanges();
+
+      const popoverWindow = fixture.debugElement.query(By.directive(NgbPopoverWindow));
+      expect(popoverWindow.nativeElement).toHaveCssClass('popover');
+    });
   });
 
 
@@ -744,3 +753,10 @@ export class DestroyableCmpt implements OnDestroy {
 
   ngOnDestroy(): void { this._spyService.called = true; }
 }
+
+@Component({selector: 'test-hooks', template: `<div ngbPopover="popover"></div>`})
+export class TestHooksComponent implements AfterViewInit {
+  @ViewChild(NgbPopover) popover;
+
+  ngAfterViewInit() { this.popover.open(); }
+}

src/popover/popover.ts

@@ -212,7 +212,16 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
         this._document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
       }
 
-      // apply styling to set basic css-classes on target element, before going for positioning
+      // We need to detect changes, because we don't know where .open() might be called from.
+      // Ex. opening popover from one of lifecycle hooks that run after the CD
+      // (say from ngAfterViewInit) will result in 'ExpressionHasChanged' exception
+      this._windowRef.changeDetectorRef.detectChanges();
+
+      // We need to mark for check, because popover won't work inside the OnPush component.
+      // Ex. when we use expression like `{{ popover.isOpen() : 'opened' : 'closed' }}`
+      // inside the template of an OnPush component and we change the popover from
+      // open -> closed, the expression in question won't be updated unless we explicitly
+      // mark the parent component to be checked.
       this._windowRef.changeDetectorRef.markForCheck();
 
       ngbAutoClose(