Ais-Hits | Angular InstantSearch V4 (Deprecated)
Signature
<ais-hits // Optional parameters [transformItems]="function" ></ais-hits>
Import
Copy
1
2
3
4
5
6
7
8
import { NgAisHitsModule } from 'angular-instantsearch';
@NgModule({
imports: [
NgAisHitsModule,
],
})
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
Use the ais-hits
widget to display a list of search results.
To set the number of search results, use one of:
- The hits-per-page widget
- The configure widget and set the
hitsPerPage
insearchParameters
.
Examples
1
<ais-hits></ais-hits>
Props
transformItems
function
Receives the items and is called before displaying them.
It returns a new array with the same shape as the original.
This is helpful when transforming or reordering items.
Don’t use transformItems
to remove items
since this will affect your pagination.
The entire results
data is also available, including all regular response parameters and helper parameters (for example, disjunctiveFacetsRefinements
).
If you’re transforming an attribute with the highlight widget, you must transform item._highlightResult[attribute].value
.
1
<ais-hits [transformItems]="transformItems"></ais-hits>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
// ...
transformItems(items) {
return items.map(item => ({
...item,
isInCart: this.cart.includes(item.objectID)
}));
},
/* or, combined with results */
transformItems(items, { results }) {
return items.map((item, index) => ({
...item,
position: { index, page: results.page },
}));
},
}
hits
object[]
The matched hits from the Algolia API. You can use Algolia’s highlighting feature with the highlight
component.
results
object
The complete response from the Algolia API. It contains the hits
, metadata about the page, the number of hits, and so on. Unless you need to access metadata, use hits
instead. You should also consider the stats
widget if you want to build a widget that displays metadata about the search.
1
2
3
4
5
6
7
8
<ais-hits>
<ng-template let-hits="hits" let-results="results">
<div *ngFor="let hit of hits">
Hit {{hit.objectID}}:
<ais-highlight attribute="name" [hit]="hit"></ais-highlight>
</div>
</ng-template>
</ais-hits>
insights
function
Sends Insights events.
method: string
: the Insights method to be called. Only search-related methods are supported:'clickedObjectIDsAfterSearch'
,'convertedObjectIDsAfterSearch'
.payload: object
: the payload to be sent.eventName: string
: the name of the event.objectIDs: string[]
: a list ofobjectID
s.index?: string
: the name of the index related to the click.queryID?: string
: the AlgoliaqueryID
found in the search response whenclickAnalytics: true
.userToken?: string
: a user identifier.positions?: number[]
: the position of the click in the list of Algolia search results. When not provided,index
,queryID
, andpositions
are inferred by the InstantSearch context and the passedobjectID
s:index
by default is the name of the index that returned the passedobjectID
s.queryID
by default is the ID of the query that returned the passedobjectID
s.positions
by default is the absolute position of the passedobjectID
s. It’s worth noting that each element ofitems
has the following read-only properties:
__queryID
: the query ID (only ifclickAnalytics
is set totrue
).-
__position
: the absolute position of the item.For more details on the constraints of each
payload
property, refer to the Insights API client documentation.
1
2
3
4
5
6
7
8
9
10
11
12
13
<ais-hits>
<ng-template let-hits="hits" let-insights="insights">
<div *ngFor="let hit of hits">
<ais-highlight attribute="name" [hit]="hit"></ais-highlight>
<button (click)="insights(
'clickedObjectIDsAfterSearch',
{ eventName: 'Add to cart', objectIDs: [hit.objectID] }
)">
Add to cart
</button>
</div>
</ng-template>
</ais-hits>