InstantSearch / Angular / V4 / API reference

Ais-Hierarchical-Menu | Angular InstantSearch V4 (Deprecated)

Deprecated content
Angular InstantSearch is deprecated. Please use InstantSearch.js instead. For more information, see Migrating from Angular InstantSearch.

Signature

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

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

Required
Type: 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

Optional
Type: number

How many facet values to retrieve.

1
2
3
4
<ais-hierarchical-menu
  // ...
  [limit]="20"
></ais-hierarchical-menu>

separator

Optional
Type: string

The level separator used in the records.

1
2
3
4
<ais-hierarchical-menu
  // ...
  separator="-"
></ais-hierarchical-menu>

rootPath

Optional
Type: 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

Optional
Type: 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

Optional
Type: 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

Optional
Type: 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

Optional
Type: 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,
    }));
  },
}
Did you find this page helpful?