ais-sort-by
You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.
<ais-sort-by [items]="object[]" ></ais-sort-by>
About this widget
The ais-sort-by widget displays a list of indices, allowing a user to change the way hits are sorted (with replica indices). Another common use case is to let the user switch between different indices.
For this widget to work, you must define all indices that you pass down as options as replicas of the main index.
Examples
1
2
3
4
5
6
7
<ais-sort-by
[items]="[
{ value: 'instant_search', label: 'Featured' },
{ value: 'instant_search_price_asc', label: 'Price asc.' },
{ value: 'instant_search_price_desc', label: 'Price desc.' },
]"
></ais-sort-by>
Props
items
|
type: [{value: string, label: string}]
Required
The list of indices to search in. |
||
|
Copy
|
|||
Customize the UI - connectSortBy
If you want to create your own UI of the ais-sort-by widget, you can combine the connectSortBy 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-sort-by',
template: '<p>It works!</p>'
})
export class SortBy extends BaseWidget {
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('SortBy');
}
}
There are a couple of things happening in this boilerplate:
- we create a
SortByclass extendingBaseWidget - we reference the
<ais-instantsearch>parent component instance on theSortBywidget class - we set
app-sort-byas a selector, so we can use our component as<app-sort-by></app-sort-by>
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 { connectSortBy } from 'instantsearch.js/es/connectors';
@Component({
selector: 'app-sort-by',
template: '<p>It works!</p>'
})
export class SortBy extends BaseWidget {
public state: {
// render options
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('SortBy');
}
ngOnInit() {
this.createWidget(connectSortBy, {
// instance options
items: [
{ label: 'Featured', value: 'instant_search' },
{ label: 'Price (asc)', value: 'instant_search_price_asc' },
{ label: 'Price (desc)', value: 'instant_search_price_desc' },
],
});
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: {
options: object[];
currentRefinement: string;
hasNoResults: boolean;
refine: Function;
widgetParams: object;
}
1
2
3
4
5
<select (change)="state.refine($event.target.value)">
<option *ngFor="let option of state.options" [value]="option.value" >
{{ option.label }}
</option>
</select>
Rendering options
options
|
type: object[]
The list of items the widget can display, with each item:
|
currentRefinement
|
type: string
The currently selected index. |
hasNoResults
|
type: boolean
Whether or not the search got results. |
refine
|
type: function
Switches indices and triggers a new search. |
widgetParams
|
type: object
All original widget options forwarded to the render function. |
Instance options
items
|
type: object[]
Required
The list of indices to search in, with each item:
|
transformItems
|
type: function
default: items => items
Optional
Receives the items, and is called before displaying them. Returns 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
import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectSortBy } from 'instantsearch.js/es/connectors';
@Component({
selector: 'app-sort-by',
template: `
<select (change)="state.refine($event.target.value)">
<option *ngFor="let option of state.options" [value]="option.value" >
{{ option.label }}
</option>
</select>
`
})
export class SortBy extends BaseWidget {
public state: {
options: object[];
currentRefinement: string;
hasNoResults: boolean;
refine: Function;
widgetParams: object;
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('SortBy');
}
ngOnInit() {
this.createWidget(connectSortBy, {
// instance options
items: [
{ label: 'Featured', value: 'instant_search' },
{ label: 'Price (asc)', value: 'instant_search_price_asc' },
{ label: 'Price (desc)', value: 'instant_search_price_desc' },
],
});
super.ngOnInit();
}
}
HTML output
1
2
3
4
5
6
7
<div class="ais-SortBy">
<select class="ais-SortBy-select">
<option class="ais-SortBy-option" value="instant_search">Featured</option>
<option class="ais-SortBy-option" value="instant_search_price_asc">Price asc.</option>
<option class="ais-SortBy-option" value="instant_search_price_desc">Price desc.</option>
</select>
</div>
