Ais-Numeric-Menu | Angular InstantSearch V4 (Deprecated)
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. 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 asattributesForFaceting
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
string
The name of the attribute in the record.
1
<ais-numeric-menu attribute="price"></ais-numeric-menu>
items
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
boolean
Whether to hide the menu if there’s no item to display
1
<ais-numeric-menu [autoHideContainer]="false"></ais-numeric-menu>