Ais-Infinite-Hits | Angular InstantSearch V4 (Deprecated)

Signature

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

1
2
3
4
5
6
7
8
import { NgAisInfiniteHitsModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisInfiniteHitsModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-infinite-hits widget displays a list of results with a “Show more” button at the bottom of the list. As an alternative to this approach, the infinite scroll guide describes how to create an automatically-scrolling infinite hits experience.

To configure the number of hits to show, use one of:

• The hits-per-page widget
• The configure widget and set hitsPerPage in searchParameters.

If there are no hits, you should display a message to users and clear filters so they can start over.

Examples

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

Props

showPrevious

Enable the button to load previous results.

The button is only displayed if the routing option is enabled in ais-instantsearch and users aren’t on the first page. You can override this behavior with templates.

showPreviousLabel

The label for the “Show previous” button.

showMoreLabel

The label for the “Show more” button.

transformItems

Receives the items and is called before displaying them. It returns a new array with the same “shape” as the original. This is helpful when transforming, removing, or reordering items.

The complete results data is also available, including all regular response parameters and helper parameters (for example, disjunctiveFacetsRefinements).

If you’re transforming an attribute with the highlight widget, you must transform item._highlightResult[attribute].value.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  // ...
  transformItems(items) {
    return items.map(item => ({
      ...item,
      isInCart: this.cart.includes(item.objectID)
    }));
  },

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

hits

The matched hits from the Algolia API. You can use Algolia’s highlighting feature with the highlight component.

results

The complete response from the Algolia API. It contains the hits, metadata about the page, the number of hits, and so on. Unless you need to access metadata, use hits instead. You should also consider the stats widget if you want to build a widget that displays metadata about the search.

isFirstPage

Indicates whether the first page of hits has been reached.

isLastPage

Indicates whether the last page of hits has been reached.

showPrevious

Loads the previous page of hits.

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

Loads the next page of hits.

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>

insights

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 found in the search response when 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 true).

• __position: the absolute position of the item.

  For more details on the constraints of each payload property, refer to the Insights API client documentation.

1
2
3
4
5
6
7
8
9
10
11
12
13
<ais-infinite-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-infinite-hits>