Algolia Instantsearch with Angular

Algolia Instantsearch with Angular 8 102 words.

Jeff Delaney avatar
By
Created
Last Updated
Code Slack
#angular #algolia
👀

This tutorial is an extension of the Algolia Cloud Functions Guide. You must have the Cloud Functions deployed to start making instant search queries from your frontend app.

Install Instantsearch

Algolia provides official Angular support. Follow the installation steps to make the prebuilt components available in your app.

Angular Instantsearch Component

file_type_html search.component.html 
<ais-instantsearch
  [config]="{
    apiKey: 'YOUR-SEARCH-ONLY-KEY',
    appId: 'YOUR-APP-ID',
    indexName: 'customers',
    routing: true
  }">

<ais-search-box></ais-search-box>
  <ais-hits>
    <ng-template let-hits="hits" let-results="results">
        <div *ngIf="hits.length === 0">
            No results found matching <strong>{{results.query}}</strong>.
        </div>
              
        <div *ngIf="results.query">
            <div *ngFor="let hit of hits" class="content">
                <img [src]="hit.avatar">
                <section>
                    <h3>{{hit.username}} {{hit.objectID}}</h3>
                    <ais-highlight attribute="bio" [hit]="hit"></ais-highlight>
                </section>
            </div>
        </div>
      </ng-template>
  </ais-hits>

</ais-instantsearch>

Q&A Chat