Skip to content

Instantly share code, notes, and snippets.

@codediodeio
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>
<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();
}
@sandiphob
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.

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