API Reference / Angular InstantSearch Widgets / ais-query-rule-custom-data
Aug. 23, 2019

ais-query-rule-custom-data

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature
<ais-query-rule-custom-data
  // Optional parameters
  [transformItems]="function"
></ais-query-rule-custom-data>

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

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

transformItems
type: function
Optional

Transforms the items to display.

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

Templates

items
type: object[]

The items returned by the Rules.

The following example assumes a Rule returned this custom data.

1
2
3
4
5
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}
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

1
<div class="ais-QueryRuleCustomData"></div>

Did you find this page helpful?