API Reference / Angular InstantSearch Widgets / ais-query-rule-custom-data
Apr. 24, 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>
See code examples

About this widget

The ais-query-rule-custom-data widget displays custom data from Query Rules.

You may want to use this widget to display banners or recommendations returned by Query 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

transformItems
type: function
Optional

Transforms the items to display.
Copy 
1
2
3

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

Templates

items
type: object[]

The items returned by the Query Rules.

The following example assumes a Query 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 v3