Algolia instantsearch.js Angular 4

search-ui.component.html

<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>

search-ui.component.ts

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();
  }

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 !

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

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 !

How to destroy the instant search objects after compnant is destryoed

@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