Last active
May 12, 2018 23:41
-
-
Save codediodeio/8b8b22844f8fd8a34ff6d6a6e8582468 to your computer and use it in GitHub Desktop.
Algolia instantsearch.js Angular 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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