Ais-Snippet | Angular InstantSearch V4 (Deprecated)

Signature

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

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

@NgModule({
  imports: [
    NgAisSnippetModule,
  ],
})
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 displays attributes in a shorter form (a snippet). Snippeted attributes are also highlighted.

It uses Algolia’s snippeting feature with the hit object provided by hits or infinite-hits.

It requires escapeHTML to be set to true in the surrounding <ais-hits></ais-hits>.

To determine which attributes should be snippeted, first set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet parameter). With attributesToSnippet, you can also set the snippet’s size to a specific number of words (it defaults to 10).

Examples

Basic usage

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

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-snippet attribute="meta.title" [hit]="hit"></ais-snippet>

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-snippet attribute="title" [hit]="hit"></ais-snippet>
    </div>
  </ng-template>
</ais-hits>

Props

attribute

Attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like actor.bio.

1
<ais-snippet attribute="name"></ais-snippet>

hit

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

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

tagName

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

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