Using Algolia Instantsearch with Angular 6.

Hey ladies and gentlemen of all ages,

This will be the third post I have written concerning Algolia. The journey so far has been great following up with Algolia Instantsearch and Angular. And no, I am not an employee of Algolia just a fanboy that loves what they do.

So let’s dive right into the tutorial. Some couple of weeks back Algolia dropped an update which supported Angular 5 and 6 and trust me it is amazing and super simple

We will start by installing Angular CLI

npm install -g angular/cli@6

After which we will create a new project called ng-algolia

ng new ng-algolia 
cd ng-algolia

we then move into the project after which it’s done creating and installing all the necessary packages. After that we install the angular-instantsearch package for what we need to do

npm install angular-instantsearch --save

After the installation is complete we can dive into the code. To make the package work we will have to import NgAisModule into app/src/app.module.ts file.

import { NgAisModule } from 'angular-instantsearch';  
@NgModule({   
     declarations: [AppComponent, ...],   
     imports: [NgAisModule.forRoot(), ...],      
     bootstrap: [AppComponent]                            
}) 
export class AppModule {}

We add NgAisModule.forRoot() to the App Module because it is the root module, if you are using it in a shared module (Which means any other module which is not the root module of the application.) you will have to omit .forRoot() .

Algolia has been kind enough to provide styling for us. to get the Algolia styling we will have to insert the below code into our angular.json in the apps > styles array:

{
  "styles": [
    "node_modules/angular-instantsearch/bundles/instantsearch.min.css",
    "node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css",
    "styles.css"
  ]
}

Then you need to update the file named polyfills.ts to add the below code to the bottom of your code (That is, After all the comments 😉 ).

(window as any).process = {
  env: { DEBUG: undefined },
};

So after all the importation and copy and paste we can now use the Algolia Instantsearch widgets (Hooray!!! 🙌 ).

I remember saying that this is simple right ? you will see why now. All you need to do can be done in your HTMLfile.

First we will start with the node which is the parent node that enables the connection with Algolia.

<ais-instantsearch
  [config]="{
    apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
    appId: 'latency',
    indexName: 'instant_search',
    routing: true
  }"
>
</ais-instantsearch>

The apikey, appId, IndexName can be gotten from your Algolia dashboard.

Now let’s add the search box (<ais-search-box>) and the result list which is <ais-hits> we need.

<ais-instantsearch [config]="{...}">
  <ais-search-box></ais-search-box>
  <ais-hits></ais-hits>
</ais-instantsearch>

The above will return the default format of results, which you have in your Algolia dashboard, to get a personalized and customized result you can use this:

<ais-hits>
  <ng-template let-hits="hits">
    <div *ngFor="let hit of hits">
      Hit {{hit.objectID}}: {{hit.name}}
    </div>
  </ng-template>
</ais-hits>

One very important aspect of the search is highlightning the matching parts of the results. We can use the widget to do that for you:

<ais-hits>
  <ng-template let-hits="hits">
    <div *ngFor="let hit of hits">
      Hit {{hit.objectID}}:
      <ais-highlight attribute="name" [hit]="hit">
      </ais-highlight>
    </div>
  </ng-template>
</ais-hits>

While the Search Box is the way to go when it comes to textual search, you may also want to provide filters based on the structure of the records.

Algolia provides a set of parameters for filtering by facets, numbers or geo location. Angular InstantSearch packages those into a set of widgets.

Since the dataset used here is an e-commerce one, let’s add a RefinementList to filter the products by categories:

Add this code right after </ais-search-box> or anywhere you want it to be in your code.

<ais-refinement-list attribute="brand"></ais-refinement-list>

The attribute option specifies the faceted attribute to use in this widget. This attribute should be declared as a facet in the index configuration as well.

The values displayed are computed by Algolia from the results.

So let’s see the full code:

AppComponent.ts

<ais-instantsearch [config]="{...}">
  <ais-search-box></ais-search-box>
  <ais-refinement-list attribute="brand"></ais-refinement-list>
  <ais-hits>
    <ng-template let-hits="hits">
       <div *ngFor="let hit of hits">
         Hit {{hit.objectID}}:
         <ais-highlight attribute="name" [hit]="hit">
         </ais-highlight>
       </div>
    </ng-template>
  </ais-hits>
</ais-instantsearch>

Here’s a pictorial result of our efforts so far:

This has been great so far.

Yes before I forget, there’s a little challenge which I have the solution to. If you need to edit the style of something like the Search Box or the Refinement List or any of the Algolia Instantsearch components you will have to use ::ng-deep to point to inner nodes in the components.

example, you if you want to edit the search box input field you will have to do.

::ng-deep .ais-SearchBox-input { background-color: #fff; }

I hope this helps you create amazing Algolia projects.