Angular4 Send parameter to searchBox

There’s a way to set a parámeter to the searchbox?
Because I’ve tried to set as:
this.state.query = newQuery
but it doesnt.
Thanks

Hello @pbvarsok,

Are you using https://github.com/algolia/angular-instantsearch? Or the InstantSearch.js integration guide with Angular?

If it’s the guide, you can try: this.state.refine(newQuery) which will trigger a new search programatically and update the query.

Cheers, Maxime.

Thanks @iam4x, im using:


I’ve tried to use that (this.state.refine(newQuery)) but it didn’t work… plus, it doesn’t set the newQuery on the input.

Can you share me the exact code you are using? this.state.refine('foobar') should trigger a new search and after update the query into the input.

SearchBox Component
import { Component, OnInit, Input, ViewChildren } from ‘@angular/core’;
import { connectSearchBox } from ‘instantsearch.js/es/connectors’;
import { InstantsearchService } from ‘…/…/services/instantsearch.service’;

@Component({
  selector: 'app-search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent implements OnInit {

    // Define SearchBox initial state
    state: { query: string; refine: Function } = {
        query: '',
        refine() {}
    };

    @ViewChildren('searchBox') searchBox;

    constructor(private instantSearchService: InstantsearchService) { }

    ngOnInit() {
        const widget = connectSearchBox(this.updateState);
        this.instantSearchService.searchEvents.addWidget(widget());

        /** here! :D */
        this.state.refine('test');
    }

    updateState = (state, isFirstRendering) => {
        // asynchronous update of the state
        // avoid `ExpressionChangedAfterItHasBeenCheckedError`
        if (isFirstRendering) {
            return Promise.resolve(null).then(() => {
                this.state = state;
            });
        }
        this.state = state;
    }

    handleChange(query) {
        this.state.refine(query)
    }
}

Hit Component
import { Component, OnInit, Input } from ‘@angular/core’;
import { connectHits } from ‘instantsearch.js/es/connectors’;
import { InstantsearchService } from ‘…/…/services/instantsearch.service’;

@Component({
  selector: 'app-hits',
  templateUrl: './hits.component.html',
  styleUrls: ['./hits.component.css']
})
export class HitsComponent implements OnInit {

    // Define how your component state will look like,
    // and intialize it with an empty hits array
    state: { hits: {}[] } = { hits: [] };

    constructor(private instantSearchService: InstantsearchService) {
        this.searchEngineService.openResults.subscribe(obj=>this.openResults(obj.open, obj.sufix));
        // Create a widget which will call `this.updateState` whenever
        // something changes on the search state itself
        const widget = connectHits(this.updateState);

        // Register the Hits widget into the instantSearchService search instance.
        this.instantSearchService.searchEvents.addWidget(widget());
    }

    ngOnInit() {
    }

    updateState = (state, isFirstRendering) => {
        // asynchronous update of the state
        // avoid `ExpressionChangedAfterItHasBeenCheckedError`
        if (isFirstRendering) {
            return Promise.resolve().then(() => {
                this.state = state;
            });
        }
        this.state = state;
    }
}

With this code, all works fine, but not initialize the search with TEST… :frowning:
Thanks @iam4x

I don’t know what’s happening… There’s no way right?

Hello @pbvarsok

If you want to set a query at the init step, you should do it with the searchParameters object on when you pass the config to the InstantSearch instance:

{
  appId: 'xxxx',
  apiKey: 'xxxx',
  indexName: 'xxxx',
  searchParameters: {
    query: 'TEST'
  }
}

It will start with the query test :+1:

There’s no other way? I mean, after all is started…?