API Reference / Angular InstantSearch / ais-highlight

ais-highlight

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

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

Copy 
1

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

Usage with nested properties

Given this record:

Copy 
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:

Copy 
1

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

Usage within hits

Copy 
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.
Copy 
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.
Copy 
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.
Copy 
1

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

HTML output

Copy 
1

<span class="ais-Highlight">This is the <em class="ais-Highlight-highlighted">highlighted text</em></span>
Did you find this page helpful?
Angular InstantSearch v4