InstantSearch / Angular / V4 / API reference

Ais-Numeric-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-numeric-menu
  attribute="string"
  [items]="object[]"
  // Optional parameters
  [autoHideContainer]="boolean"
></ais-numeric-menu>

Import

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

@NgModule({
  imports: [
    NgAisNumericMenuModule,
  ],
})
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-numeric-menu component displays a menu that lets users choose a single range for a specific numeric attribute.

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.

  • The attribute passed to the attribute prop must be represented as a number in the index, not a string.

Examples

1
2
3
4
5
6
7
8
9
10
<ais-numeric-menu
  attribute="price"
  [items]="[
    { label: 'All' },
    { end: 4, label: 'less than 4' },
    { start: 4, end: 4, label: '4' },
    { start: 5, end: 10, label: 'between 5 and 10' },
    { start: 10, label: 'more than 10' }
  ]"
></ais-numeric-menu>

Props

attribute

Required
Type: string

The name of the attribute in the record.

1
<ais-numeric-menu attribute="price"></ais-numeric-menu>

items

Required
Type: object[]

The list of ranges availables. Both start and end can be omitted inside the item. Only label is required.

1
2
3
4
5
6
7
8
9
<ais-numeric-menu
  [items]="[
    { label: 'All' },
    { end: 4, label: 'less than 4' },
    { start: 4, end: 4, label: '4' },
    { start: 5, end: 10, label: 'between 5 and 10' },
    { start: 10, label: 'more than 10' }
  ]"
></ais-numeric-menu>

autoHideContainer

Optional
Type: boolean

Whether to hide the menu if there’s no item to display

1
<ais-numeric-menu [autoHideContainer]="false"></ais-numeric-menu>
Did you find this page helpful?