API Reference / Angular InstantSearch / ais-hits

ais-hits

Signature 
<ais-hits
  // Optional parameters
  [transformItems]="function"
></ais-hits>
See code examples

About this widget

Use ais-hits to display a list of results. To configure the number of hits to show, use one of:

For guidance on how to search across more than one index, read the multi-index search guide.

Examples

Copy 
1

<ais-hits></ais-hits>

Properties

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

If you’re transforming an attribute using the ais-highlight widget, you need to transform item._highlightResult[attribute].value.
Copy 
1

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

Templates

hits
type: object[]

The matched hits from the Algolia API. You can leverage the highlighting feature of Algolia with the 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 stats widget if you want to build a widget that displays metadata about the search.
Copy 
1
2
3
4
5
6
7
8

<ais-hits>
  <ng-template let-hits="hits" let-results="results">
    <div *ngFor="let hit of hits">
      Hit {{hit.objectID}}:
      <ais-highlight attribute="name" [hit]="hit"></ais-highlight>
    </div>
  </ng-template>
</ais-hits>
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.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

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

HTML output

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

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

Sending Click and Conversion events

Please refer to the guide on Sending Insight Events to learn about sending events from any InstantSearch widget.

Guides Send Events with Angular InstantSearch
Did you find this page helpful?
Angular InstantSearch v4