Conditional Display

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

Handling no results

Not all queries lead to results, and it’s important to let users know when this happens. This gives you an opportunity to provide hints on how to adjust the query. This way, you can ensure users don’t leave your website or search using an external search engine.

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>

Note that the above example also works with ais-infinite-hits.

Let the user clear all filters

Users make mistakes, which can cause them to not find any results. You can account for this by providing a way to clear filters right from the “no results” state, so they can start over.

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

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 the empty query

By default, Angular InstantSearch always shows you results, even when the query is empty. Depending on your use case and the way you want to build your UI, you may want to only 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>