API Reference / Angular InstantSearch Widgets / ais-infinite-hits
Apr. 24, 2019

ais-infinite-hits

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

Widget signature 
<ais-infinite-hits
  // Optional parameters
  showPrevious="boolean"
  showPreviousLabel="string"
  showMoreLabel="string"
  [transformItems]="function"
></ais-infinite-hits>
See code examples

About this widget

The ais-infinite-hits is used to display a list of results. To configure the number of hits to show, use either:

Examples

Copy 
1

<ais-infinite-hits></ais-infinite-hits>

Properties

showPrevious
type: boolean
default: false
Optional

Enable the button to load previous results.

The button is only displayed if the routing option is enabled in ais-instantsearch and if the user is not on the first page. It’s possible to override this behavior by using templates.
showPreviousLabel
type: string
default: "Show previous results"
Optional

Label used on the “Show previous” button.
showMoreLabel
type: string
default: "Show more results"
Optional

Label used on the “Show more” button.
transformItems
type: function
default: items => items
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 mapping over the items to transform, and remove or reorder them.
Copy 
1

<ais-infinite-hits [transformItems]="transformItems"></ais-infinite-hits>

Templates

hits
type: object[]

The matched hits from the Algolia API. You can leverage the highlighting feature of Algolia with the ais-highlight component.
results
type: object

The complete response from the Algolia API. It contains the hits but also metadata about the page, number of hits, etc. We recommend using hits rather than this option. You can also take a look at the ais-stats widget if you want to build a widget that displays metadata about the search.
isFirstPage
type: boolean

Indicates whether the first page of hits has been reached.
isLastPage
type: boolean

Indicates whether the last page of hits has been reached.
showPrevious
type: function

Loads the previous page of hits.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ais-infinite-hits>
  <ng-template
    let-hits="hits"
    let-results="results"
    let-refinePrevious="showPrevious"
  >
    <!-- No results message -->
    <div *ngIf="hits.length === 0">
      No results found matching <strong>{{results.query}}</strong>.
    </div>

    <!-- Show previous button template -->
    <button (click)="refinePrevious($event)">
      Show previous
    </button>

    <!-- Hit template -->
    <div *ngFor="let hit of hits">
      <h1>
        <ais-highlight
          attribute="title"
          [hit]="hit"
        ></ais-highlight>
      </h1>

      <p>{{hit.description}}</p>
    </div>
  </ng-template>
</ais-infinite-hits>
showMore
type: function

Loads the next page of hits.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ais-infinite-hits>
  <ng-template
    let-hits="hits"
    let-results="results"
    let-refineNext="showMore"
  >
    <!-- No results message -->
    <div *ngIf="hits.length === 0">
      No results found matching <strong>{{results.query}}</strong>.
    </div>

    <!-- Hit template -->
    <div *ngFor="let hit of hits">
      <h1>
        <ais-highlight
          attribute="title"
          [hit]="hit"
        ></ais-highlight>
      </h1>

      <p>{{hit.description}}</p>
    </div>

    <!-- Show more button template -->
    <button (click)="refineNext($event)">
      Show more
    </button>
  </ng-template>
</ais-infinite-hits>

Sending Click and Conversion events

InstantSearch can connect with the Insights API client for JavaScript to allow sending click and conversion events right from the ais-infinite-hits widget.

Requirements

This requires installing the search-insights library separately:

You can refer to our insights API documentation for more details.

It’s a 3-step process:

1. Install the Insights API client for JavaScript

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

<script>
  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.1.1";

  !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e.aa=e.aa||function(){
  (e.aa.queue=e.aa.queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
  i.async=1,i.src=ALGOLIA_INSIGHTS_SRC,c.parentNode.insertBefore(i,c)
  }(window,document,"script",0,"aa");

  aa('init', {
    appId: 'YourApplicationID',
    apiKey: 'YourSearchOnlyAPIKey',
  });
</script>

2. Connect the Insights API client for JavaScript with Angular InstantSearch and enable clickAnalytics

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

import * as algoliasearch from 'algoliasearch/lite';

@Component({
  template: `
    <ais-instantsearch [config]="config">
      <ais-configure [searchParameters]="{ clickAnalytics: true }"></ais-configure>
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    indexName: 'instant_search',
    searchClient: algoliasearch('YourApplicationID', 'YourAPIKey'),
    insightsClient: (window as any).aa,
  }
}

3. Call the insights function from your ais-infinite-hits component

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

<ais-infinite-hits>
  <ng-template let-hits="hits" let-insights="insights">
    <div *ngFor="let hit of hits">
      <a href="/product?queryID={{hit.__queryID}}">
        <ais-highlight attribute="name" [hit]="hit"></ais-highlight>
      </a>
      <button (click)="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [hit.objectID] })">
        Add to cart
      </button>
    </div>
  </ng-template>
</ais-infinite-hits>

Provided props

insights
type: function
signature: (method: string, payload: object) => void

Sends insights events.

  • method: string: the insights method to be called. Only search-related methods are supported: 'clickedObjectIDsAfterSearch', 'convertedObjectIDsAfterSearch'.

  • payload: object: the payload to be sent.

    • eventName: string: the name of the event.
    • objectIDs: string[]: a list of objectIDs.
    • index?: string: the name of the index related to the click.
    • queryID?: string: the Algolia queryID that can be found in the search response when using clickAnalytics: true.
    • userToken?: string: a user identifier.
    • positions?: number[]: the position of the click in the list of Algolia search results.

When not provided, index, queryID, and positions are inferred by the InstantSearch context and the passed objectIDs:

  • index by default is the name of index that returned the passed objectIDs.
  • queryID by default is the ID of the query that returned the passed objectIDs.
  • positions by default is the absolute positions of the passed objectIDs.

It’s worth noting that each element of items has the following read-only properties:

  • __queryID: the query ID (only if clickAnalytics is set to true).
  • __position: the absolute position of the item.

For more details on the contraints that apply to each payload property, please refer to our insights API client documentation.

Example

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

<ais-infinite-hits>
  <ng-template let-hits="hits" let-insights="insights">
    <div *ngFor="let hit of hits">
      <a href="/product?queryID={{hit.__queryID}}">
        <ais-highlight attribute="name" [hit]="hit"></ais-highlight>
      </a>
      <button (click)="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to favorite', objectIDs: [hit.objectID] })">
        Add to favorite
      </button>
      <button (click)="insights('convertedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [hit.objectID] })">
        Add to cart
      </button>
    </div>
  </ng-template>
</ais-infinite-hits>

HTML output

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

<div class="ais-InfiniteHits">
  <button class="ais-InfiniteHits-showPrevious">Show previous results</button>

  <ul class="ais-InfiniteHits-list">
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
  </ul>

  <button class="ais-InfiniteHits-showMore">Show more results</button>
</div>

Did you find this page helpful?

Angular InstantSearch v3