InstantSearch / Angular / V4 / API reference

Ais-Sort-By | 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-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.

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

items

Required
Type: [{value: string, label: string}]

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>
Did you find this page helpful?