Conditional display in Angular InstantSearch

Angular InstantSearch isn’t compatible with Angular’s Ivy view engine. We’re investigating how best to support this. For more information and to vote for Algolia’s support of Angular 16 and beyond, see the GitHub issue Algolia Support for Angular InstantSearch

This guide describes what to do when there are no results or when there’s no query. Sometimes, though, users may not get any hits if their device can’t access the network or the network connection is slow.

If you want to feature content in your search results based on a set of conditions, you can use Algolia Rules to:

• Feature specific data from within your records to, for example, show promotional prices during a sales period
• Display advertisements or promotional banners.

To learn how to suppress InstantSearch’s initial search query, check out the conditional requests guide.

Handling no results

Since not all queries lead to results, it’s essential to let users know when this happens by providing hints on how to adjust the query.

Display a message

The easiest way to display a fallback message when a query doesn’t return results is to add some logic inside the ais-hits template to detect whenever there are no hits.

1
2
3
4
5
6
7
8
<ais-hits>
  <ng-template let-hits="hits" let-results="results">
    <div *ngIf="hits.length === 0">
      No results have been found for {{ results.query }}.
    </div>
    <div *ngFor="let hit of hits">Hit: {{ hit.objectID }}</div>
  </ng-template>
</ais-hits>

The preceding example also works with ais-infinite-hits.

Let users reset filters

If users apply too many filters, they may not find any results. You should account for this by letting them reset filters from the “no results” display so they can start another search.

Do this with the ais-clear-refinements widget. You can also add [clearsQuery]="true" to clear the query.

1
2
3
4
5
6
7
8
9
<ais-hits>
  <ng-template let-hits="hits" let-results="results">
    <div *ngIf="hits.length === 0">
      No results have been found for {{ results.query }}.
      <ais-clear-refinements [clearsQuery]="true"></ais-clear-refinements>
    </div>
    <div *ngFor="let hit of hits">Hit: {{ hit.objectID }}</div>
  </ng-template>
</ais-hits>

Handling empty queries

By default, InstantSearch always shows results, even when the query is empty. Depending on your use case and how you build your UI, you may only want to show results when there’s a query.

1
2
3
4
5
6
7
<ais-hits>
  <ng-template let-hits="hits" let-results="results">
    <div *ngIf="results.query && results.query.length > 0">
      <div *ngFor="let hit of hits">Hit: {{ hit.objectID }}</div>
    </div>
  </ng-template>
</ais-hits>