Algolia and angular 4

Question

I'm trying to follow this tutorial here : https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/

in order to implement instantsearchjs in my website.

Everything is linked Okay, i can query and have result in .JSON from my website .

But i don't understant how to render it, i can't put the fonction outside the ngOnInit()

Here is my file :

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as firebase from 'firebase';
import * as algoliasearch from 'algoliasearch';
import * as instantsearch from 'instantsearch.js';


@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css'],
})



export class HomepageComponent implements OnInit {

  constructor(private router: Router) {

  }

    var search = instantsearch({
      // Replace with your own values
      appId: '4DJA9OYKC1',
      apiKey: '12de76865a02a406ee95786c6f4a3cf3', // search only API key, no ADMIN key
      indexName: 'events',
      urlSync: true
    });

    search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-input'
      })
    ); 

    search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits',
        hitsPerPage: 10,
        templates: {
          item: document.getElementById('hit-template').innerHTML,
          empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
        }
      })
    );

    search.addWidget(
      instantsearch.widgets.pagination({
        container: '#pagination'
      })
    );  


  ngOnInit() {
    var client = algoliasearch('4DJA9OYKC1', '12de76865a02a406ee95786c6f4a3cf3');
    var index = client.initIndex('events');

    index.search('Ada', function(err, content) {
      console.log(content.hits);
      //console.log(err);
    });

I think it's a problem of function inside the TS but i don't see how to implement it in Angular.

Inside Oninit it compile but error everywhere on the page, and outside it doesn't compile.

The code in ng on init in the example work perfectly and give me the result on the website console.

Thanks in advance for the help of the community

Anyone ? As soon as i add a widget, the website stop to work. — foufrix, Jun 30 '17 at 14:29
I'm not familiar with Angular 4 but InstantSearch.js is doing its own business with the DOM. Could it possible that both libraries are both trying to modify the same part of the DOM which confuses Angular. One thing that could help a lot is to make a reproducible test case on https://jsfiddle.net/ — bobylito, Jul 01 '17 at 09:05

score 1 · Answer 1 · answered Sep 11 '17 at 19:03

To do this you should use the instantsearch.js version 2.1 which included connectors which helps in creating custom instantsearch.js widgets which can be used with Angular

// initialize custom hits widget
let customHits = connectHits(this.renderFn);
this.search.addWidget(
   customHits({
    subject: this.hitts
   })
);

The connectHits function requires a value which is the rendering function of the custom widget. This function outputs the values of the hits which is in turn inserted into the connectHits function to make another function which serves as the widget.

The render function is below:

renderFn(HitsRenderingOptions) {
  HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}

So in the HTML page the result of your widget is used as follows:

<!-- Hits List --->
<li *ngFor="let hit of hitts">         
  {{ hit }}
</li>
<!-- End Hits List --->

Remember in the customHits function we assigned the subject which is the result of the customHits function to the this.hitts variable.

I hope this helps.

Algolia and angular 4

1 Answers1