IgxTextHighlight Directive

1. Overview

IgxTextHighlightDirective provides a way to highlight text elements.

<div [igxTextHighlight]="highlightClass">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

As a developer I want to be able to highlight parts of the text in a certain element.
As a developer I want to be able to customize how the highlight looks like.

As an end user I would like to be able to highlight part of the application, so certain text elements stand out from the rest of the text.

The highlight directive will be used to highlight searched strings in the IgxGridComponent.

Name	Type	Description
cssClass	string	Determines the CSS class of the highlight elements, allowing the developer to provide custom CSS to customize the highlight.
activeCssClass	string	Determines the CSS class of the active highlight element, allowing the developer to provide custom CSS to customize the active highlight.
groupName	string	Identifies the highlight within a unique group, allowing to have several different highlight groups each having their own active highlight.
value	any	The underlying value of the element that will be highlighted
row	number	The index of the row on which the directive is currently on
column	number	The index of the column on which the directive is currently on
page	number	The index of the page on which the directive is currently on (used when the component containing the directive supports paging)

Name	Type	Arguments	Description
highlight	number	The text that should be highlighted and, optionally, if the search should be case sensitive or not (it defaults to false if it isn't specified).	Clears the existing highlight and highlight the searched text. Returns how many times the element contains the searched text.
clearHighlight	void	N/A	Clears any existing highlight
activateIfNecessary	void	N/A	Activates the highlight if it is on the currently active row, column and page