ais-query-rule-custom-data

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  // ...
  transformItems(items) {
    return items.filter(item => Boolean(item.banner));
  },

  /* or, combined with results */
  transformItems(items, { results }) {
    return items.map(item => ({
      ...item,
      visible: results.page === 0,
    }));
  },
}

Templates


            items

type: object[]

The items returned by the Rules.

The following example assumes a Rule returned this custom data.

Copy
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}