ais-highlight

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

<ais-highlight
  attribute="string"
  [hit]="object"
  // Optional parameters
  tagName="string"
></ais-highlight>

About this widget

The Highlight widget renders any attribute from a hit into its highlighted form (when relevant). The hit property is an object as provided by ais-hits and ais-infinite-hits.

This component leverages the highlighting feature of Algolia and is designed to work with escapeHTML set to true in the surrounding <ais-hits></ais-hits>.

Examples

Basic usage

1
<ais-highlight attribute="title" [hit]="hit"></ais-highlight>

Usage with nested properties

Given this record:

1
2
3
4
5
6
{
  "objectID": 1,
  "meta": {
    "title": "my title"
  }
}

You can access the highlighted version by specifying the path separating levels with dots:

1
<ais-highlight attribute="meta.title" [hit]="hit"></ais-highlight>

Usage within hits

1
2
3
4
5
6
7
8
<ais-hits>
  <ng-template let-hits="hits">
    <div *ngFor="let hit of hits">
      Hit {{hit.objectID}}:
      <ais-highlight attribute="title" [hit]="hit"></ais-highlight>
    </div>
  </ng-template>
</ais-hits>

HTML output

1
<span class="ais-Highlight">This is the <em class="ais-Highlight-highlighted">highlighted text</em></span>