Constructors

Section titled "Constructors"

IgxTextHighlightDirective

new IgxTextHighlightDirective(): IgxTextHighlightDirective

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:196

Returns IgxTextHighlightDirective

Properties

Section titled "Properties"

activeCssClass

Section titled "activeCssClass"

Determines the CSS class of the active highlight element. This allows the developer to provide custom CSS to customize the highlight.

<div
  igxTextHighlight
  [activeCssClass]="activeHighlightClass">
</div>
activeCssClass: string

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:72

column

Section titled "column"

The identifier of the column on which the directive is currently on.

<div
  igxTextHighlight
  [column]="0">
</div>
column: any

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:147

cssClass

Section titled "cssClass"

Determines the CSS class of the highlight elements. This allows the developer to provide custom CSS to customize the highlight.

<div
  igxTextHighlight
  [cssClass]="myClass">
</div>
cssClass: string

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:58

groupName

Section titled "groupName"

Identifies the highlight within a unique group. This allows it to have several different highlight groups, with each of them having their own active highlight.

<div
  igxTextHighlight
  [groupName]="myGroupName">
</div>
groupName: string = ''

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:93

metadata

Section titled "metadata"

A map that contains all additional conditions, that you need to activate a highlighted element. To activate the condition, you will have to add a new metadata key to the metadata property of the IActiveHighlightInfo interface.

 
metadata: Map<string, any>

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:168

Example

// Set a property, which would disable the highlight for a given element on a certain condition
 const metadata = new Map<string, any>();
 metadata.set('highlightElement', false);
<div
  igxTextHighlight
  [metadata]="metadata">
</div>

row

Section titled "row"

The identifier of the row on which the directive is currently on.

<div
  igxTextHighlight
  [row]="0">
</div>
row: any

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:134

value

Section titled "value" 
value: any

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:112, projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:115

Methods

Section titled "Methods"

activateIfNecessary

Section titled "activateIfNecessary"

Activates the highlight if it is on the currently active row and column.

activateIfNecessary(): void

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:314

Returns void

clearHighlight

Section titled "clearHighlight"

Clears any existing highlight.

clearHighlight(): void

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:302

Returns void

highlight

Section titled "highlight"

Clears the existing highlight and highlights the searched text. Returns how many times the element contains the searched text.

highlight(text: string, caseSensitive: boolean, exactMatch: boolean): number

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:274

Parameters

  • text: string
  • caseSensitive: boolean
  • exactMatch: boolean

Returns number

observe

Section titled "observe"

Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM. Should be used only when necessary as using many observers may lead to performance degradation.

observe(): void

Defined in projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:326

Returns void