IgxTextHighlight Directive

1. Overview

IgxTextHighlightDirective provides a way to highlight text elements.

`<div igxTextHighlight id="content" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [page]="0">
            {{html}}
</div>`

2. User Stories

Developer

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.

End User

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.

Integration scenarios

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

3. API

Inputs

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)

Methods

Name	Type	Arguments	Description
highlight	number	The text that should be highlighted and, optionally, if the search should be case sensitive and/or an exact match (both default to false if they aren'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
setActiveHighlight (static)	void	The highlight group, the column, row and page of the directive and the index of the highlight	Activates the highlight at a given index (if such highlight exists)

4. Test Scenarios

Automation

Highlight inputs are properly initialized
The highlight method properly highlights all instances of the searched string
The highlight method properly highlights all instances of the searched string - case sensitive
The highlight method properly highlights all instances of the searched string - exact match
The clearHighlight method clears all existing highlights
The highlight and clearHighlight methods do not affect the underlying do structure and text content
The setActiveHighlight method properly activates the highlight at a given index
The highlight method gracefully handles erroneous searches (the searched text is null, undefined, etc.)
The highlights are properly updated when the underlying value has changed
The highlights are properly updated when the underlying value has changed - case sensitive
The highlights are properly updated when the underlying value has changed - exact match