Ais-Hierarchical-Menu | Angular InstantSearch V4 (Deprecated)
Signature
<ais-hierarchical-menu [attributes]="string[]" // Optional parameters [limit]="number" separator="string" rootPath="string" [showParentLevel]="boolean" [sortBy]="string[]|function" [autoHideContainer]="boolean" [transformItems]="function" ></ais-hierarchical-menu>
Import
Copy
1
2
3
4
5
6
7
8
import { NgAisHierarchicalMenuModule } from 'angular-instantsearch';
@NgModule({
imports: [
NgAisHierarchicalMenuModule,
],
})
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
The ais-hierarchical-menu
component displays a tree menu that lets users browse attributes.
Requirements
The objects to use in the hierarchical menu must follow this structure:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{
"objectID": "321432",
"name": "lemon",
"categories.lvl0": "products",
"categories.lvl1": "products > fruits"
},
{
"objectID": "8976987",
"name": "orange",
"categories.lvl0": "products",
"categories.lvl1": "products > fruits"
}
]
You can also provide more than one path for each level:
1
2
3
4
5
6
7
8
[
{
"objectID": "321432",
"name": "lemon",
"categories.lvl0": ["products", "goods"],
"categories.lvl1": ["products > fruits", "goods > to eat"]
}
]
The attributes passed to the attributes
prop must be declared as Attributes for faceting on the Algolia dashboard) or configured as attributesForFaceting
with the Algolia API.
Examples
1
2
3
4
5
6
7
<ais-hierarchical-menu
[attributes]="[
'categories.lvl0',
'categories.lvl1',
'categories.lvl2'
]"
></ais-hierarchical-menu>
Props
attributes
string[]
The names of the hierarchical attributes that you need to target, in ascending order.
To avoid unexpected behavior, you can’t use the same attribute
prop in a different type of widget.
1
2
3
4
5
6
7
<ais-hierarchical-menu
[attributes]="[
'categories.lvl0',
'categories.lvl1',
'categories.lvl2'
]"
></ais-hierarchical-menu>
limit
number
How many facet values to retrieve.
1
2
3
4
<ais-hierarchical-menu
// ...
[limit]="20"
></ais-hierarchical-menu>
separator
string
The level separator used in the records.
1
2
3
4
<ais-hierarchical-menu
// ...
separator="-"
></ais-hierarchical-menu>
rootPath
string
The path to use if the first level is not the root level.
1
2
3
4
<ais-hierarchical-menu
// ...
rootPath="Appliances"
></ais-hierarchical-menu>
showParentLevel
string
Whether to show the siblings of the selected parent level of the current refined value.
This option doesn’t impact the root level. All root items are always visible.
1
2
3
4
<ais-hierarchical-menu
// ...
[showParentLevel]="false"
></ais-hierarchical-menu>
sortBy
string[]|function
How to sort refinements. Must be one or more of the following strings:
"count"
(same as"count:desc"
)"count:asc"
"count:desc"
"name"
(same as"name:asc"
)"name:asc"
"name:desc"
"isRefined"
(same as"isRefined:asc"
)"isRefined:asc"
"isRefined:desc"
You can also give a function (with the same signature as the JavaScript Array.sort
function).
1
2
3
4
<ais-hierarchical-menu
// ...
[sortBy]="['isRefined', 'name:asc']"
></ais-hierarchical-menu>
autoHideContainer
boolean
Hides the hierarchical menu if there’s no item to display.
1
2
3
4
<ais-hierarchical-menu
// ...
[autoHideContainer]="true"
></ais-hierarchical-menu>
transformItems
function
Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. This is helpful when transforming, removing, or reordering items.
In addition, the full results
data is available, which includes all regular response parameters, as well as parameters from the helper (for example disjunctiveFacetsRefinements
).
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
@Component({
template: `
<ais-hierarchical-menu
// ...
[transformItems]="transformItems"
></ais-hierarchical-menu>
`,
})
export class AppComponent {
transformItems(items) {
return items.map(item => ({
...item,
label: item.label.toUpperCase(),
}));
},
/* or, combined with results */
transformItems(items, { results }) {
return items.map(item => ({
...item,
label: item.isRefined
? `${item.label} (page ${results.page + 1}/${results.nbPages})`
: item.label,
}));
},
}