diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index fa6e1013f0c..62f896b1839 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -9,7 +9,8 @@ import { OnDestroy, Output, Renderer2, - SimpleChanges + SimpleChanges, + AfterViewChecked } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -32,7 +33,7 @@ export interface IActiveHighlightInfo { @Directive({ selector: '[igxTextHighlight]' }) -export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnChanges { +export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges { private static onActiveElementChanged = new EventEmitter(); public static highlightGroupsMap = new Map(); @@ -42,6 +43,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh private _nodeWasRemoved = false; private _forceEvaluation = false; private _activeElementIndex = -1; + private _oldValue: any; /** * Determines the `CSS` class of the highlight elements. @@ -221,11 +223,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh * @hidden */ ngOnChanges(changes: SimpleChanges) { - if (changes.value && !changes.value.firstChange) { - this.highlight(this._lastSearchInfo.searchedText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch); - this.activateIfNecessary(); - } - if ((changes.row !== undefined && !changes.row.firstChange) || (changes.column !== undefined && !changes.column.firstChange) || (changes.page !== undefined && !changes.page.firstChange)) { @@ -261,6 +258,17 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh this._container = this.parentElement.firstElementChild; } + /** + * @hidden + */ + ngAfterViewChecked() { + if (this.value !== this._oldValue) { + this.highlight(this._lastSearchInfo.searchedText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch); + this.activateIfNecessary(); + this._oldValue = this.value; + } + } + /** * Clears the existing highlight and highlights the searched text. * Returns how many times the element contains the searched text.