# wrMark

> Wrap every occurrence of a query in `<mark>` tags — useful for highlighting search-term matches in autocomplete results, lists, and table cells.

Source: https://ngwr.dev/reference/pipes/wr-mark  
Kind: Pipe

## Install

```angular-ts
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

```angular-html
<!-- 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.

```scss
/* 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` | `—` |

## See also

- [wr-select](https://ngwr.dev/reference/components/select) — Most common host — highlight the typed query inside each suggestion.
- [wr-command-palette](https://ngwr.dev/reference/components/command-palette) — Same pattern — visually link the query to the matching item label.