Install
import { WrMark } from 'ngwr/pipes';
@Component({ imports: [WrMark] })
export class MyComponent { /* ... */ }Live demo
Type a query — every match in the paragraph and list lights up. Input is HTML-escaped before the wrap, so the pipe is safe to feed user-supplied values.
Usage
<!-- The output is SafeHtml — bind with [innerHTML]. -->
<span [innerHTML]="row.name | wrMark: query()"></span>
<!-- Case-sensitive: -->
<span [innerHTML]="row.name | wrMark: query() : true"></span>
<!-- Empty / null query is a pass-through: -->
<span [innerHTML]="row.name | wrMark: null"></span>Styling
The pipe outputs plain <mark> elements. Style them globally — every match shares the same class so themes can target them.
/* Style the wrap globally — every match shares the same class. */
mark {
background: rgba(var(--wr-color-warning-rgb), 0.4);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}API
| Name | Description | Type | Default |
|---|---|---|---|
value | Source text. Null / undefined returns "". | string | null | undefined | — |
query | Search term. Empty / null leaves the value untouched. | string | null | undefined | — |
caseSensitive | Exact-case match. Default is case-insensitive. | boolean | false |
returns | SafeHtml — bind with [innerHTML]. Input is HTML-escaped first so user-supplied values cannot inject markup. | SafeHtml | — |