UI libraries
/
Angular InstantSearch
/
Widgets
Dec. 04, 2023
uiState
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
About this widget
The uiState object is created by InstantSearch internally.
Every widget has its own way of updating the object.
In the context of routing, the object shape of routeState is completely up to you but must be based on the keys in the uiState.
For details, see the example implementation in our routing guide.
Example
The following is an example of an InstantSearch uiState object.
It represents what the user has searched for, how they’ve refined the results, and how the results are displayed.
Copy
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
const uiState = {
query: 'Hill Valley',
refinementList: {
colors: ['white', 'black']
},
configure: {
distinct: true,
},
menu: {
category: 'Decoration'
},
hierarchicalMenu: {
categories: ['Decoration > Clocks']
},
numericMenu: {
price: '100:500'
},
ratingMenu: {
rating: 4
},
range: {
ageInYears: '2:10'
},
toggle: {
freeShipping: true
},
geoSearch: {
boundingBox: '47.3165,4.9665,47.3424,5.0201'
},
sortBy: 'most_popular_index',
page: 2,
hitsPerPage: 20
};
Did you find this page helpful?
