UI libraries / Angular InstantSearch / Widgets

ais-query-rule-custom-data

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-query-rule-custom-data
  // Optional parameters
  [transformItems]="function"
></ais-query-rule-custom-data>
Import
Copy 
1
2
3
4
5
6
7
8

import { NgAisQueryRuleCustomDataModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisQueryRuleCustomDataModule,
  ],
})
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-query-rule-custom-data widget displays custom data from Rules.

You may want to use this widget to display banners or recommendations returned by Rules, and that match search parameters.

Examples

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

<ais-query-rule-custom-data>
  <ng-template let-items="items">
    <div *ngFor="let item of items">
      <div *ngIf="item.banner">
        <h2>{{ item.title }}</h2>
        <a [href]="item.link">
          <img
            [src]="item.banner"
            [alt]="item.title"
          />
        </a>
      </div>
    </div>
  </ng-template>
</ais-query-rule-custom-data>

Properties

Parameter Description
transformItems
type: function
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).
Copy 
1
2
3

<ais-query-rule-custom-data
  [transformItems]="transformItems"
></ais-query-rule-custom-data>

Templates

Parameter Description
items
type: object[]

The items returned by the Rules.

The following example assumes a Rule returned this custom data.

Copy 
1
2
3
4
5

{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ais-query-rule-custom-data>
  <ng-template let-items="items">
    <div *ngFor="let item of items">
      <div *ngIf="item.banner">
        <h2>{{ item.title }}</h2>
        <a [href]="item.link">
          <img
            [src]="item.banner"
            [alt]="item.title"
          />
        </a>
      </div>
    </div>
  </ng-template>
</ais-query-rule-custom-data>

HTML output

Copy 
1

<div class="ais-QueryRuleCustomData"></div>
Did you find this page helpful?
Angular InstantSearch v4