API Reference / Angular InstantSearch Widgets / ais-query-rule-custom-data

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 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

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 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 v3