Custom InstantSearchJS template with Angular bindings

search-ui.html

<div *ngFor="let hit of hits | async">
  {{hit | json}}
</div>

search-ui.ts

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import { AngularFireDatabase } from 'angularfire2/database';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

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;
  hits = new BehaviorSubject(null);

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    const options = environment.algolia;

    this.search = instantsearch(options);

    let customHits = instantsearch.connectors.connectHits(this.renderFn)

    this.search.addWidget(
      customHits({
        subject: this.hits
      })
    );



    // search box widget
    this.search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-box',
        autofocus: false,
        placeholder: 'Search for books',
        poweredBy: true
      })
    );



    this.search.start();


  }


  renderFn(HitsRenderingOptions) {

    HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits)

  }
 }