Skip to content

Instantly share code, notes, and snippets.

Last active May 12, 2018 23:41
Show Gist options
  • Save codediodeio/8b8b22844f8fd8a34ff6d6a6e8582468 to your computer and use it in GitHub Desktop.
Save codediodeio/8b8b22844f8fd8a34ff6d6a6e8582468 to your computer and use it in GitHub Desktop.
Algolia instantsearch.js Angular 4
<div id="search-box">
<!-- SearchBox widget will appear here -->
<div id="stats">
<!-- stats widget will appear here -->
<div id="hits">
<!-- Hits widget will appear here -->
<div id="pagination">
<!-- pagination widget will appear here -->
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js'
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;
// const options = {
// appId: string,
// apiKey: string,
// indexName: string
// } = instantsearch(options);
// search box widget
container: '#search-box',
autofocus: false,
placeholder: 'Search for actors',
poweredBy: true
// initialize hits widget
container: '#hits',
templates: {
empty: 'No results',
item: `<img src={{image_path}} width="50px">
<strong>Result {{objectID}}</strong>:
escapeHits: true
container: '#stats'
container: '#pagination',
maxPages: 20,
pushFunction: (query, state, results) => {
Copy link

foufrix commented Jul 18, 2017


I tried this code and in result i have infinite loading when i'm trying to load the page, but it's compiling fine, did you encounter that problem ?

Thanks in advance !

EDIT : Works fine finally it was a plugin of my browser that was doing the bug.
Thanks for the code !

Copy link

I believe instantsearch always runs an initial query if that's what you mean.

Copy link


I tried this code and I keep getting ERROR TypeError: instantsearch is not a function. Can you give me any clue of what I did wrong?

Thanks !

Copy link

ghost commented May 3, 2018

How to destroy the instant search objects after compnant is destryoed

Copy link

@stevejo12: I was having the same issue and was using Angular 5 & CLI 1.7.4. I used the below documentation and it worked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment