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>

1
2
3
4
5
6
7
8
import { NgAisHierarchicalMenuModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisHierarchicalMenuModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

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

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

How many facet values to retrieve.

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

separator

The level separator used in the records.

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

rootPath

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

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

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

Hides the hierarchical menu if there’s no item to display.

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

transformItems

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,
    }));
  },
}