From d0ae2da0f2f2a6189a842746ff8dca7de1ebfd04 Mon Sep 17 00:00:00 2001
From: Peter Blazejewicz <peterblazejewicz@users.noreply.github.com>
Date: Tue, 24 Sep 2019 20:41:10 +0200
Subject: [PATCH] fix(tooltip): implement change detection

This fixes issues with custom tooltip class changes  not being applied after
tooltip creation.

Fixes: #3335
---
 src/tooltip/tooltip.spec.ts | 12 ++++++++++++
 src/tooltip/tooltip.ts      | 24 +++++++++++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
index b0288608e3..642b4be0f0 100644
--- a/src/tooltip/tooltip.spec.ts
+++ b/src/tooltip/tooltip.spec.ts
@@ -60,6 +60,18 @@ describe('ngb-tooltip-window', () => {
     expect(fixture.nativeElement).toHaveCssClass('my-custom-class');
   });
 
+  it('should allow to change custom class to new one', () => {
+    const fixture = TestBed.createComponent(NgbTooltipWindow);
+    fixture.componentInstance.tooltipClass = 'first-custom-class';
+    fixture.detectChanges();
+    fixture.componentInstance.tooltipClass = 'second-custom-class';
+    fixture.detectChanges();
+    fixture.componentInstance.tooltipClass = 'third-custom-class';
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement).toHaveCssClass('third-custom-class');
+  });
+
 });
 
 describe('ngb-tooltip', () => {
diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
index 093d6af663..09e3375a18 100644
--- a/src/tooltip/tooltip.ts
+++ b/src/tooltip/tooltip.ts
@@ -18,7 +18,9 @@ import {
   NgZone,
   ViewEncapsulation,
   ChangeDetectorRef,
-  ApplicationRef
+  ApplicationRef,
+  OnChanges,
+  SimpleChanges
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
@@ -39,16 +41,25 @@ let nextId = 0;
   template: `<div class="arrow"></div><div class="tooltip-inner"><ng-content></ng-content></div>`,
   styleUrls: ['./tooltip.scss']
 })
-export class NgbTooltipWindow {
+export class NgbTooltipWindow implements OnChanges {
   @Input() id: string;
   @Input() tooltipClass: string;
+
+  constructor(private _changeDetector: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const tooltipClassChange = changes['tooltipClass'];
+    if (tooltipClassChange && !tooltipClassChange.firstChange) {
+      this._changeDetector.markForCheck();
+    }
+  }
 }
 
 /**
  * A lightweight and extensible directive for fancy tooltip creation.
  */
 @Directive({selector: '[ngbTooltip]', exportAs: 'ngbTooltip'})
-export class NgbTooltip implements OnInit, OnDestroy {
+export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
   /**
    * Indicates whether the tooltip should be closed on `Escape` key and inside/outside clicks:
    *
@@ -253,6 +264,13 @@ export class NgbTooltip implements OnInit, OnDestroy {
         this.close.bind(this), +this.openDelay, +this.closeDelay);
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    const tooltipClassChange = changes['tooltipClass'];
+    if (tooltipClassChange && !tooltipClassChange.firstChange && this._windowRef) {
+      this._windowRef.instance.tooltipClass = tooltipClassChange.currentValue;
+    }
+  }
+
   ngOnDestroy() {
     this.close();
     // This check is needed as it might happen that ngOnDestroy is called before ngOnInit