API Reference / Angular InstantSearch Widgets / ais-highlight
Aug. 23, 2019

ais-highlight

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

Widget signature
<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>

Properties

attribute
type: string
Required

Attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like actor.name.

1
<ais-highlight attribute="name"></ais-highlight>
hit
type: object
Required

Original “hit” object, given from Hits or connectHits. Needs a _highlightResult[attribute].value to work.

1
<ais-highlight [hit]="hit"></ais-highlight>
tagName
type: string
default: "em"
Optional

Tag to use for the highlighted parts of the string. For example: mark.

1
<ais-highlight tagName="mark"></ais-highlight>

HTML output

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

Did you find this page helpful?