Ais-Highlight | Angular InstantSearch V4 (Deprecated)

Signature

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

1
2
3
4
5
6
7
8
import { NgAisHighlightModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisHighlightModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

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 hits and 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>

Props

attribute

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

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

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

tagName

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

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