Algolia Instantsearch.js infused with Angular 4
Hi, I am not much of a blogger or a community person but I just had to blog about how my experience with Angular 4 and Algolia Instantsearch.js was.
Was developing a project which needed an optimized search service, then I found out about Algolia Search from a friend of mine. But then infusing it into my project was the difficulty because there were no tutorials like this one you are reading, that could help me through my process of learning Algolia and Angular 4.
So enough of the introduction let’s go straight into the order of the day; Infusing Algolia Instantsearch.js and Angular 4 together.


First let’s learn about Algolia Search:
Algolia is a U.S. startup company offering a web search product through a SaaS (software as a service) model. The Algolia model provides search as a service, offering web search across a client’s website using an externally hosted search engine. Although in-site search has long been available from general web search providers such as Google, this is typically done as a subset of general web searching. The search engine crawls or spiders the web at large, including the client site, and then offers search features restricted to only that target site. This is a large and complex task, available only to large organisations at the scale of Google or Microsoft. — Wikipedia
After learning about Algolia Search, let’s learn about Angular 4. That is the installation and usage.
Firstly we have to install Angular CLI for our project
npm install @angular/cli@latest --saveafter inserting the above code into our command line, we create a new project
ng new alsearchcd alsearchng serve
Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host 0.0.0.0 --port 4201After playing around with command line you can go back to your project and link Algolia instantsearch.js with your Angular 4 project by inserting the code below into your environment file (environment.ts is located in the environment folder which is located in the src folder /src/environments/environment.ts )
export const environment = { production: false, algolia: { appId: 'APP_ID', apiKey: 'SEARCH_ONLY_KEY', indexName: 'getstarted_actors', urlSync: false }};
After doing that we need to install the instantsearch.js package so that we can use the different packages of Algolia Search.
npm install instantsearch.js --saveIf 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/instantsearch.js@2.0.0/dist/instantsearch.min.css"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch-theme-algolia.min.css">
Search Component
search.component.ts
Our entire search feature will be wrapped up in the SearchComponent, which you can generate with ng g component search. During ngOnInit you configure the instantsearch with your environment variables and call .start() initialize it. Use declare var instantsearch: any to clear some errors which might be encountered when using instantsearch.
import { Component, OnInit } from '@angular/core';import { environment } from '../../environments/environment';import * as instantsearch from 'instantsearch.js';declare var instantsearch: any;@Component({ selector: 'search', templateUrl: './search.component.html', styleUrls: ['./search.component.scss']})export class SearchComponent 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 widgetthis.search.addWidget( instantsearch.widgets.hits({ container: '#hits', }));
Search HTML
search.component.html
In the template, you just ID the elements you want replaced with the widgets.
<div id="search-box"> <!-- SearchBox widget will appear here --></div><div id="hits"> <!-- Hits widget will appear here --></div>
To use a custom template for the results showed instead of the default plain text you can use the code below ( 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 }));
Full Code
//search.component.tsimport { Component, OnInit } from '@angular/core';import { environment } from '../../environments/environment';import * as instantsearch from 'instantsearch.js';declare var instantsearch: any;@Component({ selector: 'search', templateUrl: './search.component.html', styleUrls: ['./search.component.scss']})export class SearchComponent implements OnInit { search: any; constructor() { } ngOnInit() { const options = environment.algolia; this.search = instantsearch(options); this.search.addWidget( instantsearch.widgets.searchBox({ container: '#search-box' }) );// initialize custom hits widget 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 }) ); this.search.start(); }}//search.component.html<div id="search-box"> <!-- SearchBox widget will appear here --></div><div id="hits"> <!-- Hits widget will appear here --></div>
I hope the above helped you.
