Using Angular 2+ with Algolia Instantsearch.js Connectors

Since my previous post Algolia Instantsearch.js infused with Angular 4, Algolia Search came out with Instantsearch.js Connectors Versions 2 which truely made working with Angular 2+ great.

They really had Angular in mind with this new implementations.

So I will have to skip some parts of this tutorial like the creating of components and installing Angular since it was already touched in my previous post Algolia Instantsearch.js infused with Angular 4.

Updating previous post

So now we will make our Algolia search application work with connectors first by importing Instantsearch.js connectors (for now we will be working with the Hit connectors ‘ConnectHits’).

import * as instantsearch from 'instantsearch.js';
import {connectHits} from "instantsearch.js/es/connectors/index";

So after importing both instantsearch.js and the respective connector we will have to actually print out our data from Algolia Search and to do this we will have to first create a render function which will output our data.

renderFn(HitsRenderingOptions) {
 HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}

In the renderFn function we are getting a HitsRenderingOption which signifies the various options for the connectors, you can visit https://community.algolia.com/instantsearch.js/documentation/#custom-widgets.

After the renderFn function we use the renderFn function in the connect Hits function.

let customHits = connectHits(this.renderFn);
  this.search.addWidget(
  customHits({
   subject: this.hitts
  })
);

The render function outputs the hits variable which will be inserted a variable customHits. Then after assigning to the variable, we use the variable customHits as a function which is used inside the search.addwidget() function.

Inside the customHits we assign the subject (which is the rendering output).

So that is that for the component file. So will head over to the HTML template file.

<li *ngFor="let hit of hitts">         
  {{ hit }}
</li>

The hitts variable was assigned from the components, and a *ngFor directive is used to loop through the array of objects.

Full Code

//search.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
import {connectHits} from "instantsearch.js/es/connectors/index";
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
let customHits = connectHits(this.renderFn);
this.search.addWidget(
  customHits({
   subject: this.hitts
  })
);
this.search.start();
}
renderFn(HitsRenderingOptions) {
HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}
}
//search.component.html
<div id="search-box">
<!-- SearchBox widget will appear here -->
</div>
<!-- Hits List --->
<li *ngFor="let hit of hitts">         
  {{ hit }}
</li>
<!-- End Hits List --->

The code above is an update of my previous post. The Algolia Instantsearch.js connectors enables the use of Angular directives.

I hope this tutorial helps get through your difficulties of implementing the wonderful Algolia Search with Angular 2 / 4.

Thank you.

.