ais-snippet
Angular InstantSearch isn’t compatible with Angular’s Ivy view engine. We’re investigating how best to support this. For more information and to vote for Algolia’s support of Angular 16 and beyond, see the GitHub issue Algolia Support for Angular InstantSearch
1
2
3
4
5
6
7
8
import { NgAisSnippetModule } from 'angular-instantsearch';
@NgModule({
imports: [
NgAisSnippetModule,
],
})
export class AppModule {}
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
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 ais-hits or ais-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>
Properties
| Parameter | Description | ||
|---|---|---|---|
attribute
|
type: string
Required
Attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like |
||
|
Copy
|
|||
hit
|
type: object
Required
Original “hit” object, given from Hits or connectHits. Needs a |
||
|
Copy
|
|||
tagName
|
type: string
default: "em"
Optional
Tag to use for the highlighted parts of the string. For example, |
||
|
Copy
|
|||
HTML output
1
<span class="ais-snippet">This is the <em class="ais-snippet-highlighted">highlighted text</em></span>
