Get only 8 records from algolia in angular

Question

I am trying to get 8 records from algolia using angular-instantsearch package.
Here is what I have done so far
.html file -

<ais-instantsearch [config]="products">
    <ais-hits>
       <ng-template let-hits="hits">
       <div class="row">
            <div class="col-lg-6"*ngFor="let hit of hits">
                <figure class="figure">
                   <img src="{{hit.image}}">
                   <figcaption>{{hit.productName}}</figcaption>
                </figure>
             </div>
       </div>
       </ng-template>
     </ais-hits>
</ais-instantsearch>   

.ts file

import algoliasearch from 'algoliasearch/lite';    
const searchClient = algoliasearch(
  environment.algolia_application_id,
  environment.algolia_search_api_key
);

export class HomeComponent implements OnInit {
    products = {
          indexName: 'products',
          searchClient
    };
}    

I'm getting 20 records but I want only 8 records.
How to get 8 records?
Any help would be appreciated.
Thanks

Answer 1

You can use ais-configure where you can specify search parameters.

Add this line to your HTML

<ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>

So the whole code looks like this:

<ais-instantsearch [config]="products">
    <ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
    <ais-hits>
       <ng-template let-hits="hits">
       <div class="row">
            <div class="col-lg-6"*ngFor="let hit of hits">
                <figure class="figure">
                   <img src="{{hit.image}}">
                   <figcaption>{{hit.productName}}</figcaption>
                </figure>
             </div>
       </div>
       </ng-template>
     </ais-hits>
</ais-instantsearch>