Ais-Menu | Angular InstantSearch V4 (Deprecated)

Signature

<ais-menu
  attribute="string"

  // Optional parameters
  [limit]="number"
  [showMore]="boolean"
  [showMoreLimit]="number"
  showMoreLabel="string"
  showLessLabel="string"
  [sortBy]="string[]|function"
  [autoHideContainer]="boolean"
  [transformItems]="function"
></ais-configure>

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

@NgModule({
  imports: [
    NgAisMenuModule,
  ],
})
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-menu allows a user to select a single value to refine from a list.

Requirements

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
<ais-menu attribute="brand"></ais-menu>

Props

attribute

The name of the attribute in the record.

To avoid unexpected behavior, you can’t use the same attribute prop in a different type of widget.

1
<ais-menu attribute="brand"></ais-menu>

limit

How many facet values to retrieve. When you enable the showMore feature, this is the number of facet values to display before clicking the “Show more” button.

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

showMore

Controls the display of the show more button.

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

showMoreLimit

Amount of items to show if showing more.

1
2
3
4
5
<ais-menu
  // ...
  [showMore]="true"
  [showMoreLimit]="20"
></ais-menu>

showMoreLabel

Label of the “Show more” button.

1
2
3
4
5
<ais-menu
  // ...
  [showMore]="true"
  showMoreLabel="See more"
></ais-menu>

showLessLabel

Label of the show less button.

1
2
3
4
5
<ais-menu
  // ...
  [showMore]="true"
  showLessLabel="See less"
></ais-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"

It’s also possible to give a function, which receives items two by two, like JavaScript’s Array.sort.

1
2
3
4
<ais-menu
  // ...
  [sortBy]="['name:desc']"
></ais-menu>

autoHideContainer

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

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

transformItems

Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for 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-menu
      // ...
      [transformItems]="transformItems"
    ></ais-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} (${results.nbPages} pages)`
        : item.label,
    }));
  },
}