UI libraries / Angular InstantSearch / Widgets

ais-numeric-menu

Angular InstantSearch isn’t compatible with Angular’s Ivy view engine. We’re investigating how best to support this. For more information and to vote for Algolia’s support of Angular 16 and beyond, see the GitHub issue Algolia Support for 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. 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.

See code examples

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

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

Properties

Parameter Description
attribute
type: string
Required

The name of the attribute in the record.
Copy 
1

<ais-numeric-menu attribute="price"></ais-numeric-menu>
items
type: object[]
Required

The list of ranges availables. Both start and end can be omitted inside the item. Only label is required.
Copy 
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
type: boolean
default: true
Optional

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

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

HTML output

Copy 
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

<div class="ais-NumericMenu">
  <ul class="ais-NumericMenu-list">
    <li class="ais-NumericMenu-item ais-NumericMenu-item--selected">
      <label class="ais-NumericMenu-label">
        <input
          class="ais-NumericMenu-radio"
          type="radio"
          name="NumericMenu"
          checked
        />
        <span class="ais-NumericMenu-labelText">All</span>
      </label>
    </li>
    <li class="ais-NumericMenu-item">
      <label class="ais-NumericMenu-label">
        <input
          class="ais-NumericMenu-radio"
          type="radio"
          name="NumericMenu"
        />
        <span class="ais-NumericMenu-labelText">Less than 500</span>
      </label>
    </li>
  </ul>
</div>

Customize the UI with connectNumericMenu

If you want to create your own UI of the ais-numeric-menu widget, you can combine the connectNumericMenu connector with the TypedBaseWidget class.

See code examples

1. Extend the TypedBaseWidget class

First of all, you will need to write some boilerplate code to initialize correctly the TypedBaseWidget class. This happens in the constructor() of your class extending the TypedBaseWidget class.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

@Component({
  selector: 'app-numeric-menu',
  template: '<p>It works!</p>'
})
export class NumericMenu extends TypedBaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('NumericMenu');
  }
}

There are a couple of things happening in this boilerplate:

  • create a NumericMenu class extending TypedBaseWidget
  • reference the <ais-instantsearch> parent component instance on the NumericMenu widget class
  • set app-numeric-menu as a selector, so we can use our component as <app-numeric-menu></app-numeric-menu>

2. Connect your custom widget

The TypedBaseWidget class has a method called createWidget() which takes two arguments: the connector to use and an object of options (instance options) for this connector. We call this method at ngOnInit. This component now implements OnInit.

Copy 
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
27
28
29
30
31
32
33
34
35
36
37
38

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectNumericMenu, {
  NumericMenuWidgetDescription,
  NumericMenuConnectorParams
} from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';

@Component({
  selector: 'app-numeric-menu',
  template: '<p>It works!</p>'
})
export class NumericMenu extends TypedBaseWidget<NumericMenuWidgetDescription, NumericMenuConnectorParams> {
  public state: NumericMenuWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('NumericMenu');
  }
  ngOnInit() {
    this.createWidget(connectNumericMenu, {
      // instance options
      attribute: 'free_shipping',
      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" }
      ],
    });
    super.ngOnInit();
  }
}

3. Render from the state

Your component instance has access to a this.state property which holds the rendering options of the widget.

public state: NumericMenuWidgetDescription['renderState'];
// {
//   items: object[];
//   canRefine: boolean;
//   refine: Function;
//   createURL: Function;
//   widgetParams: object;
// }
Copy 
1
2
3
4
5

<select (change)="state.refine(select.selectedOptions[0].value)" #select>
  <option *ngFor="let item of state.items; index as i" [value]="item.value">
    {{ state.widgetParams.items[i].label }}
  </option>
</select>

Rendering options

Parameter Description
items
type: object[]

The list of available options, with each option:

  • label: string: the label for the option.
  • value: string: the encoded URL of the bounds object with the {start, end} form. This value can be used verbatim in the webpage and can be read by refine directly. If you want to inspect the value, you can do JSON.parse(window.decodeURI(value)) to get the object.
  • isRefined: boolean: whether the refinement is selected.
canRefine
type: boolean

Whether the search can be refined.
refine
type: function

Sets the selected value and triggers a new search.
createURL
type: function

Generates a URL for the next state.
widgetParams
type: object

All original widget options forwarded to the render function.

Instance options

Parameter Description
attribute
type: string
Required

The name of the attribute in the record.
items
type: object[]
Required

A list of all the options to display, with:

  • label: string: label of the option
  • start: string: the option must be greater than or equal to start (lower bound).
  • end: string: the option must be smaller than or equal to end (upper bound).
transformItems
type: function
default: items => items
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.

Full example

Copy 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectNumericMenu, {
  NumericMenuWidgetDescription,
  NumericMenuConnectorParams
} from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';

@Component({
  selector: 'app-numeric-menu',
  template: `
<select (change)="state.refine(select.selectedOptions[0].value)" #select>
  <option *ngFor="let item of state.items; index as i" [value]="item.value">
    {{ state.widgetParams.items[i].label }}
  </option>
</select>
`
})
export class NumericMenu extends TypedBaseWidget<NumericMenuWidgetDescription, NumericMenuConnectorParams> {
  public state: NumericMenuWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('NumericMenu');
  }
  ngOnInit() {
    this.createWidget(connectNumericMenu, {
      // instance options
      attribute: 'free_shipping',
      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" }
      ],
    });
    super.ngOnInit();
  }
}
Did you find this page helpful?
Angular InstantSearch v4