Angular Full Text Search With Algolia Frontend - Part 1

In this lesson, we are going to build a full text search feature using Algolia and Angular 4. It will be broken down into two sections, with the first part focusing the frontend in Angular and the second part focusing on building your own searchable index with Firebase Cloud Functions

Algolia Lesson Series

• Algolia with Angular Frontend (You are Here)
• Algolia with Firebase Cloud Functions Backend
• Custom Hits Widget for Algolia and Angular

Setting up Angular 4 with Algolia and InstantSearch.js

The first step is to signup for a free Algolia account. It will give you an initial starter index of 500 Hollywood actors/actresses named getstarted_actors. We will be using this index for the first half of this tutorial.

Add the API Key to the Environment

In Angular, you only need to include the “search-only” API key. I’m adding it to the environment.ts file.

export const environment = {
  production: false,

  algolia: {
    appId: 'APP_ID',
    apiKey: 'SEARCH_ONLY_KEY',
    indexName: 'getstarted_actors',
    urlSync: false
  }
};

Install InstantSearchJS

The next step is to include the instantsearch.js package. This package is maintained by Algolia and includes an amazing collection of JavaScript widgets to quickly build a full text search interface. In total, there are about 20 different widgets to choose from.

npm install instantsearch.js --save

If you want to use the Algolia CSS and templates, add the following lines to the head of the index.html file.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">

Search Component

Our entire search feature will be wrapped up in the SearchUiComponent, which you can generate with ng g component search-ui. During ngOnInit you configure the instantsearch with your environment variables and call .start() initialize it.

search-ui.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js'

@Component({
  selector: 'search-ui',
  templateUrl: './search-ui.component.html',
  styleUrls: ['./search-ui.component.scss']
})
export class SearchUiComponent implements OnInit {

  search: any;

  constructor() { }

  ngOnInit() {
    const options = environment.algolia;

    this.search = instantsearch(options);
    this.search.start();
  }
}

You build out the Algolia search interface by adding widgets to it. Let’s start by adding a search field and the results (hits) to our component.

this.search.addWidget(
     instantsearch.widgets.searchBox({
       container: '#search-box'
     })
   );

   // initialize hits widget
   this.search.addWidget(
     instantsearch.widgets.hits({
       container: '#hits',
     })
   );

search-ui.component.html

In the template, you just ID the elements you want replaced with the widgets - just like jQuery.

<div id="search-box">
  <!-- SearchBox widget will appear here -->
</div>
<div id="hits">
  <!-- Hits widget will appear here -->
</div>

Custom Templating

You can also add templating to certain widgets with mustache, interpolating data with double curly brackets. In the hits widget, I display the actor’s name and image rather than the raw JSON.

this.search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        empty: 'No results',
        item: `<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px">
              Result {{objectID}}:
              {{{_highlightResult.name.value}}}`
      },
      escapeHits: true
    })
  );

The analytics widget does not modify the actual UI, but you can access the results object, which is useful for analytics and logging.

this.search.addWidget(
  instantsearch.widgets.analytics({
    pushFunction: (query, state, results) => {
      console.log(results)
    }
  })
);

There are about 20 other widgets you can add to the search, check out the example below to see how I added pagination and stats.

Full Example