UI libraries / Angular InstantSearch / Widgets

ais-sort-by

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-sort-by
  [items]="object[]"
></ais-sort-by>
Import
Copy 
1
2
3
4
5
6
7
8

import { NgAisSortByModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisSortByModule,
  ],
})
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-sort-by widget displays a list of indices, allowing a user to change the way hits are sorted (with replica indices). Another common use case is to let users switch between different indices.

For this widget to work, you must define all indices that you pass down as options as replicas of the main index.

Examples

Copy 
1
2
3
4
5
6
7

<ais-sort-by
  [items]="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' }
  ]"
></ais-sort-by>

Props

Parameter Description
items
type: [{value: string, label: string}]
Required

The list of indices to search in.
Copy 
1
2
3
4
5
6
7

<ais-sort-by
  [items]="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' }
  ]"
></ais-sort-by>

HTML output

Copy 
1
2
3
4
5
6
7

<div class="ais-SortBy">
  <select class="ais-SortBy-select">
    <option class="ais-SortBy-option" value="instant_search">Featured</option>
    <option class="ais-SortBy-option" value="instant_search_price_asc">Price asc.</option>
    <option class="ais-SortBy-option" value="instant_search_price_desc">Price desc.</option>
  </select>
</div>

Customize the UI with connectSortBy

If you want to create your own UI of the ais-sort-by widget, you can combine the connectSortBy 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-sort-by',
  template: '<p>It works!</p>'
})
export class SortBy extends TypedBaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('SortBy');
  }
}

There are a couple of things happening in this boilerplate:

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

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

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

import connectSortBy, {
  SortByWidgetDescription,
  SortByConnectorParams
} from 'instantsearch.js/es/connectors/sort-by/connectSortBy';

@Component({
  selector: 'app-sort-by',
  template: '<p>It works!</p>'
})
export class SortBy extends TypedBaseWidget<SortByWidgetDescription, SortByConnectorParams> {
  public state: SortByWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('SortBy');
  }
  ngOnInit() {
    this.createWidget(connectSortBy, {
      // instance options
      items: [
        { label: 'Featured', value: 'instant_search' },
        { label: 'Price (asc)', value: 'instant_search_price_asc' },
        { label: 'Price (desc)', value: 'instant_search_price_desc' },
      ],
    });
    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: SortByWidgetDescription['renderState'];
// {
//   options: object[];
//   currentRefinement: string;
//   canRefine: boolean;
//   refine: Function;
//   widgetParams: object;
// }
Copy 
1
2
3
4
5

<select (change)="state.refine($event.target.value)">
  <option *ngFor="let option of state.options" [value]="option.value" >
    {{ option.label }}
  </option>
</select>

Rendering options

Parameter Description
options
type: object[]

The list of items the widget can display, with each item:

  • label: string: the label of the index to display
  • value: string: the name of the index to target
currentRefinement
type: string

The currently selected index.
canRefine
type: boolean

Whether the search can be refined.
refine
type: function

Switches indices and triggers a new search.
widgetParams
type: object

All original widget options forwarded to the render function.

Instance options

Parameter Description
items
type: object[]
Required

The list of indices to search in, with each item:

  • label: string: the label of the index to display
  • value: string: the name of the index to target
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 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).

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

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

import connectSortBy, {
  SortByWidgetDescription,
  SortByConnectorParams
} from 'instantsearch.js/es/connectors/sort-by/connectSortBy';

@Component({
  selector: 'app-sort-by',
  template: `
<select (change)="state.refine($event.target.value)">
  <option *ngFor="let option of state.options" [value]="option.value" >
    {{ option.label }}
  </option>
</select>
`
})
export class SortBy extends TypedBaseWidget<SortByWidgetDescription, SortByConnectorParams> {
  public state: SortByWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('SortBy');
  }
  ngOnInit() {
    this.createWidget(connectSortBy, {
      // instance options
      items: [
        { label: 'Featured', value: 'instant_search' },
        { label: 'Price (asc)', value: 'instant_search_price_asc' },
        { label: 'Price (desc)', value: 'instant_search_price_desc' },
      ],
    });
    super.ngOnInit();
  }
}
Did you find this page helpful?
Angular InstantSearch v4