diff --git a/src/popover/popover.spec.ts b/src/popover/popover.spec.ts
index 3bde7a1b1a..46544fb079 100644
--- a/src/popover/popover.spec.ts
+++ b/src/popover/popover.spec.ts
@@ -179,6 +179,21 @@ describe('ngb-popover', () => {
expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
});
+ it('should propagate popoverClass changes to the window', () => {
+ const fixture =
+ createTestComponent(`
`);
+ const directive = fixture.debugElement.query(By.directive(NgbPopover));
+
+ triggerEvent(directive, 'click');
+ fixture.detectChanges();
+ const windowEl = getWindow(fixture.nativeElement);
+ expect(windowEl).not.toHaveCssClass('my-popover-class');
+
+ fixture.componentInstance.popoverClass = 'my-popover-class';
+ fixture.detectChanges();
+ expect(windowEl).toHaveCssClass('my-popover-class');
+ });
+
it('should accept a template for the title and properly destroy it when closing', () => {
const fixture = createTestComponent(`
Hello, {{name}}!
@@ -727,6 +742,7 @@ export class TestComponent {
show = true;
title: string;
placement: string;
+ popoverClass: string;
@ViewChild(NgbPopover, {static: true}) popover: NgbPopover;
diff --git a/src/popover/popover.ts b/src/popover/popover.ts
index 1504d72b48..d25311fcb1 100644
--- a/src/popover/popover.ts
+++ b/src/popover/popover.ts
@@ -274,9 +274,12 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
this.close.bind(this), +this.openDelay, +this.closeDelay);
}
- ngOnChanges(changes: SimpleChanges) {
+ ngOnChanges({ngbPopover, popoverTitle, disablePopover, popoverClass}: SimpleChanges) {
+ if (popoverClass && this.isOpen()) {
+ this._windowRef.instance.popoverClass = popoverClass.currentValue;
+ }
// close popover if title and content become empty, or disablePopover set to true
- if ((changes['ngbPopover'] || changes['popoverTitle'] || changes['disablePopover']) && this._isDisabled()) {
+ if ((ngbPopover || popoverTitle || disablePopover) && this._isDisabled()) {
this.close();
}
}