Description

The IgxTextHighlightDirective throws a TypeError: Cannot set properties of undefined (setting 'searchText') when the directive is destroyed before its view initialization completes. This occurs when components containing the directive are destroyed
during Angular's change detection cycle before ngAfterViewInit() has been called.

The error occurs in the clearHighlight() method which is called from ngOnDestroy(). The method attempts to access this._lastSearchInfo.searchText and this._lastSearchInfo.matchCount, but _lastSearchInfo is only initialized in
ngAfterViewInit(). If ngOnDestroy() is called before ngAfterViewInit() completes, _lastSearchInfo remains undefined, causing the error.

Error Stack Trace:
TypeError: Cannot set properties of undefined (setting 'searchText')
at _IgxTextHighlightDirective.clearHighlight (infragistics-igniteui-angular.mjs:38551:26)
at _IgxTextHighlightDirective.ngOnDestroy (infragistics-igniteui-angular.mjs:38472:10)
at executeOnDestroys (debug_node.mjs:7661:32)
at cleanUpView (debug_node.mjs:7526:9)
at destroyViewTree (debug_node.mjs:7463:21)
at destroyLView (debug_node.mjs:7500:5)

Problematic Code (from infragistics-igniteui-angular.mjs):

ngOnDestroy() { this.clearHighlight(); // Calls clearHighlight before checking initialization // ... } clearHighlight() { this.clearChildElements(false); this._lastSearchInfo.searchText = ''; // ERROR: No null check this._lastSearchInfo.matchCount = 0; // ERROR: No null check } ngAfterViewInit() { // ... this._lastSearchInfo = { // Only initialized here searchText: '', content: this.value, matchCount: 0, caseSensitive: false, exactMatch: false }; }

Steps to reproduce

1. Create an Angular application with components that use IgxTextHighlightDirective (e.g., tree nodes, list items with search highlighting)
2. Dynamically create and destroy these components rapidly (e.g., routing between views, conditionally rendering with *ngIf)
3. Ensure the components are destroyed during Angular's change detection before their ngAfterViewInit() lifecycle hook completes
4. Observe the console error: TypeError: Cannot set properties of undefined (setting 'searchText')

Result

The application throws a TypeError when IgxTextHighlightDirective is destroyed before initialization completes. The error propagates to the global error handler, potentially causing error loops or degraded user experience.

Expected result

The IgxTextHighlightDirective should safely handle being destroyed at any point in its lifecycle, including before ngAfterViewInit() completes. The clearHighlight() method should check if _lastSearchInfo exists before accessing its properties.

Proposed Fix:

 clearHighlight() { this.clearChildElements(false); if (this._lastSearchInfo) { // Add null check this._lastSearchInfo.searchText = ''; this._lastSearchInfo.matchCount = 0; } }