Is your feature request related to a problem? Please describe.
Currently, IgxTextHighlightDirective.highlight() supports highlighting only a single search term at a time. Calling highlight() multiple times replaces the previous highlight instead of appending to it.
This makes it impossible to highlight multiple independent keywords (e.g. from a split search string) within the same content.
Use case
Given a search value like: "line chart"
And string to highlight in: "line, stepline, area, steparea, rangearea, column, chart"
Both “line” and “chart” exist in the text but are not adjacent.
Desired behavior → highlight all occurrences of both words simultaneously.
Current limitation
To achieve multi-term highlighting, we attempted:
const keywords = searchValue.split(/\s+/);
keywords.forEach(keyword => {
highlightDirective.highlight(keyword);
});However, highlight() internally clears previous highlights:
this.clearChildElements(true);
So only the last keyword remains highlighted.
Because the directive stores only one _lastSearchInfo.searchText, there is no way to maintain multiple active search terms using the public API.
Describe the solution you'd like
Method "highlight" should work with array
Or
Create a new method
Additional context
To better visualise this, checkout the comment in PR 4837 in AB repo
Is your feature request related to a problem? Please describe.
Currently,
IgxTextHighlightDirective.highlight()supports highlighting only a single search term at a time. Callinghighlight()multiple times replaces the previous highlight instead of appending to it.This makes it impossible to highlight multiple independent keywords (e.g. from a split search string) within the same content.
Use case
Given a search value like: "line chart"
And string to highlight in: "line, stepline, area, steparea, rangearea, column, chart"
Both “line” and “chart” exist in the text but are not adjacent.
Desired behavior → highlight all occurrences of both words simultaneously.
Current limitation
To achieve multi-term highlighting, we attempted:
However,
highlight()internally clears previous highlights:So only the last keyword remains highlighted.
Because the directive stores only one
_lastSearchInfo.searchText, there is no way to maintain multiple active search terms using the public API.Describe the solution you'd like
Method "highlight" should work with array
Or
Create a new method
Additional context
To better visualise this, checkout the comment in PR 4837 in AB repo