Ais-Refinement-List | Angular InstantSearch V4 (Deprecated)

Signature

<ais-refinement-list
  attribute="string"

  // Optional parameters
  operator="or|and"
  [limit]="number"
  [showMoreLimit]="number"
  showMoreLabel="string"
  showLessLabel="string"
  [searchable]="boolean"
  searchPlaceholder="string"
  [sortBy]="string[]|function"
  [autoHideContainer]="boolean"
  [transformItems]="function"
></ais-refinement-list>

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

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

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

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-refinement-list component displays a list that lets users choose multiple values for a specific facet.

Requirements

The attribute passed to the attribute prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting through a set settings call to the Algolia API.

If you are using the searchable prop, you’ll also need to make the attribute searchable using the dashboard or using the API.

Examples

1
<ais-refinement-list attribute="categories"></ais-refinement-list>

Props

attribute

The name of the attribute in the record.

To avoid unexpected behavior, you can’t use the same attribute prop in a different type of widget.

1
2
3
<ais-refinement-list
  attribute="categories"
></ais-refinement-list>

operator

How to apply refinements.

1
2
3
4
<ais-refinement-list
  // ...
  operator="and"
></ais-refinement-list>

limit

How many facet values to retrieve.

1
2
3
4
<ais-refinement-list
  // ...
  [limit]="5"
></ais-refinement-list>

showMoreLimit

The maximum number of items to displayed when the list is showing more items.

1
2
3
4
<ais-refinement-list
  // ...
  [showMoreLimit]="20"
></ais-refinement-list>

showMoreLabel

Label of the “Show more” button.

1
2
3
4
<ais-refinement-list
  // ...
  showMoreLabel="See more"
></ais-refinement-list>

showLessLabel

Label of the show less button.

1
2
3
4
<ais-refinement-list
  // ...
  showLessLabel="See less"
></ais-refinement-list>

searchable

You should set it to true if the component should display an input to search for facet values. To make this feature work, you need to make the attribute searchable using the API or the dashboard.

In some situations, refined facet values might not be present in the data returned by Algolia.

1
2
3
4
<ais-refinement-list
  // ...
  [searchable]="true"
></ais-refinement-list>

searchPlaceholder

Label for the placeholder of the search box.

1
2
3
4
<ais-refinement-list
  // ...
  searchPlaceholder="Search for brand..."
></ais-refinement-list>

sortBy

How to sort refinements. Must be one or more of the following strings:

• "count" (same as "count:desc")
• "count:asc"
• "count:desc"
• "name" (same as "name:asc")
• "name:asc"
• "name:desc"
• "isRefined" (same as "isRefined:asc")
• "isRefined:asc"
• "isRefined:desc"

It’s also possible to give a function, which must have the same signature than the JavaScript Array.sort function.

In some situations, refined facet values might not be present in the data returned by Algolia.

1
2
3
4
<ais-refinement-list
  // ...
  [sortBy]="['isRefined', 'name:asc']"
></ais-refinement-list>

autoHideContainer

Hides the refinement list if there’s no item to display.

1
2
3
4
<ais-refinement-list
  // ...
  [autoHideContainer]="true"
></ais-refinement-list>

transformItems

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 Algolia search helper (for example disjunctiveFacetsRefinements).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Component({
  template: `
    <ais-refinement-list
      // ...
      [transformItems]="transformItems"
    ></ais-refinement-list>
  `,
})
export class AppComponent {
  transformItems(items) {
    return items.map(item => ({
      ...item,
      highlighted: item.highlighted.toUpperCase(),
    }));
  },

  /* or, combined with results */
  transformItems(items, { results }) {
    return results.page === 0
      ? items.slice(0, 5)
      : items;
  },
}