Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

65 lines (54 sloc) 1.79 KB
title lastmod publishdate author draft description tags youtube github type
Algolia Instantsearch with Angular
2019-08-25 13:07:30 -0700
2019-08-25 13:07:30 -0700
Jeff Delaney
false
Algolia Instantsearch with Angular 8
angular
algolia
lessons

{{% box emoji="👀" %}} 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. {{% /box %}}

Install Instantsearch

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

Angular Instantsearch Component

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

<div *ngIf="hits.length === 0"> No results found matching {{results.query}}.

    <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>
{{< /highlight >}}
You can’t perform that action at this time.