CngxHighlight

DirectivePrimaryv0.1.0WCAG AA

projects/common/layout/text/highlight.directive.ts

Import#

import { CngxHighlight } from '@cngx/common/layout'

Description#

Search-text highlighting via <mark> elements.

Walks TEXT_NODE children of the host element, splits at match boundaries, and wraps matched portions in <mark> elements. No innerHTML - safe by construction. The <mark> element has correct native SR semantics (announced as "highlighted" in most screen readers).

The original text nodes are kept by reference and re-inserted when the term changes or the directive is destroyed - Angular bindings targeting them (interpolations, structural directives) stay live.

Search result highlighting

<p [cngxHighlight]="searchTerm()">
  Angular Signals represent a fundamental shift in reactivity.
</p>

Case-sensitive matching

<p [cngxHighlight]="term()" [highlightCaseSensitive]="true">
  CamelCase matters here.
</p>

https://cngxjs.github.io/cngx/examples/#/common/layout/highlight/live-search-highlighting https://cngxjs.github.io/cngx/examples/#/common/layout/highlight/multiple-paragraphs

Metadata#

Selector: [cngxHighlight]
Export as: cngxHighlight

Index#

Properties

matchCount

Inputs

caseSensitive term

Inputs#

caseSensitive#boolean

input()

Whether matching is case-sensitive.

default false, { alias: 'highlightCaseSensitive' }

term#string

input()

The search term to highlight. Empty string clears all highlights.

default '', { alias: 'cngxHighlight' }

Instance Properties#

matchCount#unknown

Readonly

Number of matches found in the current highlight pass.

this.matchCountState.asReadonly()