Text

highlightMatches

Structured literal search highlights, never HTML.

Use it in your component

Standalone component

import { Component } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { HighlightMatchesPipe } from 'extra-pipe';

@Component({
  standalone: true,
  imports: [HighlightMatchesPipe, JsonPipe],
  template: `{{ "Ana and Ana" | highlightMatches: "Ana" | json }}`,
})
export class ExampleComponent {

}

Template

{{ "Ana and Ana" | highlightMatches: "Ana" | json }}

Try it live.

The output below runs the packed library. Edit data, not code.

Input (JSON)Use double quotes for text, or a number, array, object or null.

Parameters (JSON array)Ordered parameters: query. Locale is controlled separately.

Output localeThis pipe has no locale override.

Live template data

readonly value = "Ana and Ana";
readonly parameter0 = "Ana";
{{ value | highlightMatches: parameter0 | json }}

Rendered output

[
  {
    "text": "Ana",
    "matched": true
  },
  {
    "text": " and ",
    "matched": false
  },
  {
    "text": "Ana",
    "matched": true
  }
]