fix(popover): properly handle components using OnPush strategy

Closes #781

src/popover/popover.spec.ts

@@ -2,7 +2,7 @@ import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {createGenericTestComponent} from '../test/common';
 
 import {By} from '@angular/platform-browser';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
 
 import {NgbPopoverModule} from './popover.module';
 import {NgbPopoverWindow, NgbPopover} from './popover';
@@ -11,6 +11,9 @@ import {NgbPopoverConfig} from './popover-config';
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
+const createOnPushTestComponent =
+    (html: string) => <ComponentFixture<TestOnPushComponent>>createGenericTestComponent(html, TestOnPushComponent);
+
 describe('ngb-popover-window', () => {
   beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbPopoverModule]}); });
 
@@ -35,7 +38,9 @@ describe('ngb-popover-window', () => {
 
 describe('ngb-popover', () => {
 
-  beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbPopoverModule]}); });
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [TestComponent, TestOnPushComponent], imports: [NgbPopoverModule]});
+  });
 
   function getWindow(fixture) { return fixture.nativeElement.querySelector('ngb-popover-window'); }
 
@@ -142,6 +147,19 @@ describe('ngb-popover', () => {
       expect(windowEl).toHaveCssClass('popover-left');
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
+
+    it('should properly position popovers when a component is using the OnPush strategy', () => {
+      const fixture = createOnPushTestComponent(`<div ngbPopover="Great tip!" placement="left"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbPopover));
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture);
+
+      expect(windowEl).toHaveCssClass('popover');
+      expect(windowEl).toHaveCssClass('popover-left');
+      expect(windowEl.textContent.trim()).toBe('Great tip!');
+    });
   });
 
   describe('triggers', () => {
@@ -306,3 +324,7 @@ export class TestComponent {
 
   @ViewChild(NgbPopover) popover: NgbPopover;
 }
+
+@Component({selector: 'test-onpush-cmpt', changeDetection: ChangeDetectionStrategy.OnPush, template: ``})
+export class TestOnPushComponent {
+}

src/popover/popover.ts

@@ -86,6 +86,9 @@ export class NgbPopover implements OnInit, OnDestroy {
       this._windowRef = this._popupService.open(this.ngbPopover);
       this._windowRef.instance.placement = this.placement;
       this._windowRef.instance.title = this.popoverTitle;
+      // we need to manually invoke change detection since events registered via
+      // Renderer::listen() are not picked up by change detection with the OnPush strategy
+      this._windowRef.changeDetectorRef.markForCheck();
     }
   }