UI libraries / Angular InstantSearch / Widgets

ais-configure-related-items

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-experimental-configure-related-items
  [hit]="object"
  [matchingPatterns]="object"
  // Optional parameters
  [transformSearchParameters]="function"
></ais-experimental-configure-related-items>
Import
Copy 
1
2
3
4
5
6
7
8

import { NgAisConfigureRelatedItemsModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisConfigureRelatedItemsModule,
  ],
})
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

This widget is experimental and is subject to change in minor versions.

The ais-experimental-configure-related-items widget computes search parameters to use in related items experiences, without rendering anything.

The widget uses the hit you pass as a reference to compute relevant search parameters, so you can retrieve related items.

We recommend using this widget in a separate ais-index, used specifically for related items. The ais-index will display the related items.

Examples

Copy 
1
2
3
4
5
6
7
8

<ais-index index-name="related_items">
  <ais-experimental-configure-related-items
    [hit]="{ objectID: '1234', name: 'Remote controller', brand: 'Amazon', categories: ['TV & Home Theater', 'Streaming Media Players'] }"
    [matchingPatterns]="{ brand: { score: 1 }, categories: { score: 2 } }"
  ></ais-experimental-configure-related-items>
  <!-- This displays only related hits -->
  <ais-hits></ais-hits>
</ais-index>

Props

Parameter Description
hit
type: object
Required

The widget uses the hit you pass as a reference to compute the search parameters sent to Algolia.

You can retrieve this hit from anywhere (the app state, the backend, the history, etc.).
Copy 
1
2
3
4
5
6

<ais-index index-name="related_items">
  <ais-experimental-configure-related-items
    <!-- ... -->
    [hit]="{ objectID: '1234', name: 'Remote controller', brand: 'Amazon', categories: ['TV & Home Theater', 'Streaming Media Players'] }"
  ></ais-experimental-configure-related-items>
</ais-index>
matchingPatterns
type: object
Required

A schema that creates scored filters based on the hit’s attributes.

In the example below, the brand value gets a score of 1 while the categories value gets a score of 2.

The hit above would generate the following search parameters:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "sumOrFiltersScores": true,
  "facetFilters": ["objectID:-1234"],
  "optionalFilters": [
    ["brand:Amazon<score=1>"],
    [
      [
        "categories:TV & Home Theater<score=2>",
        "categories:Streaming Media Players<score=2>"
      ]
    ]
  ]
}

You can use nested attributes by using the dot notation to score them: { 'hierarchicalCategories.lvl0': { score: 2 } }.
Copy 
1
2
3
4
5
6

<ais-index index-name="related_items">
  <ais-experimental-configure-related-items
    <!-- ... -->
    [matchingPatterns]="{ brand: { score: 1 }, categories: { score: 2 } }"
  ></ais-experimental-configure-related-items>
</ais-index>
transformSearchParameters
type: function
Optional

A function to transform the generated search parameters.

This can be useful to override default parameters, or to increase chances of finding related items. A recommended pattern is to consider the words of a hit’s name as optionalWords.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@Component({
   template: `
     <ais-index index-name="related_items">
       <ais-experimental-configure-related-items
         <!-- ... -->
         [transformSearchParameters]="transformSearchParameters"
       />
     </ais-index>
   `,
 })
 export class AppComponent {
   transformSearchParameters(searchParameters) {
     return {
       ...searchParameters,
       // Replace `name` by what describes your hit the most
       optionalWords: this.hit.name.split(' '),
     };
   }
 }

HTML output

This widget has no HTML output.

Did you find this page helpful?
Angular InstantSearch v4