You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.
<ais-hits-per-page [items]="object[]" ></ais-hits-per-page>
About this widget #
The ais-hits-per-page widget displays a dropdown menu to let the user change the number of displayed hits.
If you only want to configure the number of hits per page without displaying a widget, you can use the ais-configure widget with the hitsPerPage search parameter.
Examples #
1
2
3
4
5
6
<ais-hits-per-page
[items]="[
{ label: '8 hits per page', value: 8, default: true },
{ label: '16 hits per page', value: 16 },
]"
></ais-hits-per-page>
Props #
Customize the UI - connectHitsPerPage#
If you want to create your own UI of the ais-hits-per-page widget, you can combine the connectHitsPerPage connector with the BaseWidget class.
1. Extend the BaseWidget class#
First of all, you will need to write some boilerplate code in order to initialize correctly the BaseWidget class. This happens in the constructor() of your class extending the BaseWidget class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
@Component({
selector: 'app-hits-per-page',
template: '<p>It works!</p>'
})
export class HitsPerPage extends BaseWidget {
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('HitsPerPage');
}
}
There are a couple of things happening in this boilerplate:
- we create a
HitsPerPageclass extendingBaseWidget - we reference the
<ais-instantsearch>parent component instance on theHitsPerPagewidget class - we set
app-hits-per-pageas a selector, so we can use our component as<app-hits-per-page></app-hits-per-page>
2. Connect your custom widget#
The BaseWidget 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 } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectHitsPerPage } from 'instantsearch.js/es/connectors';
@Component({
selector: 'app-hits-per-page',
template: '<p>It works!</p>'
})
export class HitsPerPage extends BaseWidget {
public state: {
// render options
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('HitsPerPage');
}
ngOnInit() {
this.createWidget(connectHitsPerPage, {
// instance options
items: [
{value: 6, label: '6 per page', default: true},
{value: 12, label: '12 per page'},
{value: 24, label: '24 per page'},
],
});
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: {
items: object[];
hasNoResults: boolean;
refine: Function;
widgetParams: object;
}
1
2
3
4
5
6
7
8
9
<select (change)="state.refine($event.target.value)">
<option
*ngFor="let item of state.items"
[value]="item.value"
[selected]="item.isRefined"
>
{{ item.label }}
</option>
</select>
Rendering options #
items
# |
type: object[]
The list of items the widget can display, with each item:
|
hasNoResults
# |
type: boolean
Whether or not the search has results. |
refine
# |
type: function
Sets the number of hits per page and triggers a search. |
widgetParams
# |
type: object
All original widget options forwarded to the render function. |
Instance options #
items
# |
type: object[]
Required
The list of available options, with each item:
|
transformItems
# |
type: function
default: items => items
Optional
Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them. |
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
37
38
39
40
41
42
43
import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectHitsPerPage } from 'instantsearch.js/es/connectors';
@Component({
selector: 'app-hits-per-page',
template: `
<select (change)="state.refine($event.target.value)">
<option
*ngFor="let item of state.items"
[value]="item.value"
[selected]="item.isRefined"
>
{{ item.label }}
</option>
</select>
`
})
export class HitsPerPage extends BaseWidget {
public state: {
items: object[];
hasNoResults: boolean;
refine: Function;
widgetParams: object;
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('HitsPerPage');
}
ngOnInit() {
this.createWidget(connectHitsPerPage, {
// instance options
items: [
{value: 6, label: '6 per page', default: true},
{value: 12, label: '12 per page'},
{value: 24, label: '24 per page'},
],
});
super.ngOnInit();
}
}
HTML output#
1
2
3
4
5
6
<div class="ais-HitsPerPage">
<select class="ais-HitsPerPage-select">
<option class="ais-HitsPerPage-option" value="8">8 per page</option>
<option class="ais-HitsPerPage-option" value="16">16 per page</option>
</select>
</div>
