Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Algolia instantsearch.js Angular 4
<div id="search-box">
<!-- SearchBox widget will appear here -->
</div>
<div id="stats">
<!-- stats widget will appear here -->
</div>
<div id="hits">
<!-- Hits widget will appear here -->
</div>
<div id="pagination">
<!-- pagination widget will appear here -->
</div>
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;
// const options = {
// appId: string,
// apiKey: string,
// indexName: string
// }
this.search = instantsearch(options);
// search box widget
this.search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
autofocus: false,
placeholder: 'Search for actors',
poweredBy: true
})
);
// initialize 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">
<strong>Result {{objectID}}</strong>:
{{{_highlightResult.name.value}}}`
},
escapeHits: true
})
);
this.search.addWidget(
instantsearch.widgets.stats({
container: '#stats'
})
);
this.search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination',
maxPages: 20,
})
);
this.search.addWidget(
instantsearch.widgets.analytics({
pushFunction: (query, state, results) => {
console.log(query)
console.log(state)
console.log(results)
}
})
);
this.search.start();
}
@foufrix
Copy link

foufrix commented Jul 18, 2017

Hello,

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 !

@codediodeio
Copy link
Author

codediodeio commented Jul 18, 2017

I believe instantsearch always runs an initial query if that's what you mean. https://stackoverflow.com/questions/42312491/algolia-instant-search-how-to-not-do-the-initial-search

@stevejo12
Copy link

stevejo12 commented Apr 17, 2018

Hello,

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 !

@MMHossaini
Copy link

MMHossaini commented May 3, 2018

How to destroy the instant search objects after compnant is destryoed

@sandiphob
Copy link

sandiphob commented May 12, 2018

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

https://alligator.io/angular/angular-algolia-instantsearch/
https://community.algolia.com/angular-instantsearch/getting-started.html

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