ais-snippet
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 renders any attribute from a hit into its snippeted 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-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
attribute
|
type: string
Required
Attribute of the record to snippet. You can give a dot-separated value for deeply nested objects, 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>
