import { Component } from '@angular/core';
import { WrInput } from 'ngwr/input';
import { WrMark } from 'ngwr/pipes';
@Component({ imports: [WrInput, WrMark] })
export class MyComponent {}wrMark
Highlight a search query in text with <mark>.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Live demo
Bind the result with [innerHTML]. The text is escaped first, so user input is safe.
Usage
<span [innerHTML]="row.name | wrMark: query()"></span>
<!-- Case-sensitive -->
<span [innerHTML]="row.name | wrMark: query() : true"></span>Styling
The match is a bare <mark>, so a mark rule styles it.
mark {
background: color-mix(in srgb, var(--wr-color-warning) 40%, transparent);
color: var(--wr-color-on-surface);
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 skips the wrap, leaving the escaped text. | string | null | undefined | — |
caseSensitive | Exact-case match. Default is case-insensitive. | boolean | false |
returns | Bind with [innerHTML]. The text is escaped first. | SafeHtml | — |