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

<ais-numeric-menu
  attribute="string"
  [items]="object[]"
  // Optional parameters
  [autoHideContainer]="boolean"
></ais-numeric-menu>

Import

Copy

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

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

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

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
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.

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

Copy
<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.

Copy
<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.

Copy
<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

Copy
<ais-numeric-menu [autoHideContainer]="false"></ais-numeric-menu>

Did you find this page helpful?