ais-hits
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
<ais-hits // Optional parameters [transformItems]="function" ></ais-hits>
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 # A
Use the ais-hits
widget to display a list of search results.
To set the number of search results, use one of:
- The
ais-hits-per-page
widget - The
ais-configure
widget and set thehitsPerPage
insearchParameters
.
Examples # A
1
<ais-hits></ais-hits>
Properties # A
Parameter | Description | ||
---|---|---|---|
transformItems
# |
type: function
default: items => items
Optional
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 The entire If you’re transforming an attribute with the |
||
Copy
|
Templates # A
Parameter | Description | ||
---|---|---|---|
hits
# |
type: object[]
The matched hits from the Algolia API. You can use Algolia’s highlighting feature with the |
||
results
# |
type: object
The complete response from the Algolia API. It contains the |
||
Copy
|
|||
insights
# |
type: function
signature: (method: string, payload: object) => void
Sends Insights events.
|
||
Copy
|
HTML output# A
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ais-Hits">
<ul class="ais-Hits-list">
<li class="ais-Hits-item">
...
</li>
<li class="ais-Hits-item">
...
</li>
<li class="ais-Hits-item">
...
</li>
</ul>
</div>
Customize the UI with connectHits# A
If you want to create your own UI of the ais-hits
widget, you can combine the connectHits
connector with the TypedBaseWidget
class.
1. Extend the TypedBaseWidget
class#
First of all, you will need to write some boilerplate code to initialize correctly the TypedBaseWidget
class. This happens in the constructor()
of your class extending the TypedBaseWidget
class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';
@Component({
selector: 'app-hits',
template: '<p>It works!</p>'
})
export class Hits extends TypedBaseWidget {
constructor(
@Inject(forwardRef(() => NgAisIndex))
@Optional()
public parentIndex: NgAisIndex,
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchInstance: NgAisInstantSearch
) {
super('Hits');
}
}
There are a couple of things happening in this boilerplate:
- create a
Hits
class extendingTypedBaseWidget
- reference the
<ais-instantsearch>
parent component instance on theHits
widget class - set
app-hits
as a selector, so we can use our component as<app-hits></app-hits>
2. Connect your custom widget#
The TypedBaseWidget
class has a method called createWidget()
which takes two arguments: the connector to use and an object of options
(instance options)
for this connector. We call this method at ngOnInit
. This component now implements OnInit
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';
import connectHits, {
HitsWidgetDescription,
HitsConnectorParams
} from 'instantsearch.js/es/connectors/hits/connectHits';
@Component({
selector: 'app-hits',
template: '<p>It works!</p>'
})
export class Hits extends TypedBaseWidget<HitsWidgetDescription, HitsConnectorParams> {
public state: HitsWidgetDescription['renderState']; // Rendering options
constructor(
@Inject(forwardRef(() => NgAisIndex))
@Optional()
public parentIndex: NgAisIndex,
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchInstance: NgAisInstantSearch
) {
super('Hits');
}
ngOnInit() {
this.createWidget(connectHits, {
// instance options
});
super.ngOnInit();
}
}
3. Render from the state#
Your component instance has access to a this.state
property which holds the rendering options of the widget.
public state: HitsWidgetDescription['renderState'];
// {
// hits: object[];
// results: object;
// sendEvent: (eventType, hit, eventName) => void;
// }
1
2
3
4
5
<ul>
<li *ngFor="let hit of state.hits">
<ais-highlight attribute="name" [hit]="hit"> </ais-highlight>
</li>
</ul>
Rendering options #
Parameter | Description |
---|---|
hits
# |
type: object[]
The matched hits from the Algolia API. You can use Algolia’s highlighting feature with the |
results
# |
type: object
The complete response from the Algolia API. It contains the |
sendEvent
# |
type: (eventType, hit, eventName) => void
The function to send
Learn more about these events in the |
Instance options #
Parameter | Description | ||
---|---|---|---|
escapeHTML
# |
type: boolean
default: true
Optional
Escapes HTML entities from hits string values. |
||
Copy
|
|||
transformItems
# |
type: function
default: items => items
Optional
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 The entire If you’re transforming an attribute with the |
||
Copy
|
Full example#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';
import connectHits, {
HitsWidgetDescription,
HitsConnectorParams
} from 'instantsearch.js/es/connectors/hits/connectHits';
@Component({
selector: 'app-hits',
template: `
<ul>
<li *ngFor="let hit of state.hits">
<ais-highlight attribute="name" [hit]="hit"> </ais-highlight>
</li>
</ul>
`
})
export class Hits extends TypedBaseWidget<HitsWidgetDescription, HitsConnectorParams> {
public state: HitsWidgetDescription['renderState']; // Rendering options
constructor(
@Inject(forwardRef(() => NgAisIndex))
@Optional()
public parentIndex: NgAisIndex,
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchInstance: NgAisInstantSearch
) {
super('Hits');
}
ngOnInit() {
this.createWidget(connectHits, {
// instance options
});
super.ngOnInit();
}
}