How to dynamically change search parameter in angular algolia instant search

Question

I am using <ais-configure [searchParameters]="{ aroundLatLng: '0, 0' }"></ais-configure>, and dynamically updating the { aroundLatLng: '23, 90' } object based on user's input, but I can not see any change in search result.

Here is an example, I prepared in codesandbox - https://codesandbox.io/s/kxqxr0j45r

In this example, you can see initially, I added the following search parameter:

searchParameters = { hitsPerPage: 3 };

And there is a button named "Update Search Parameter", and when you click on that button, it changes the search parameter such as -

updateParameter() { this.searchParameters.hitsPerPage = 10; }

I am expecting that any change on searchParameters should reflect on the search result. And according to this, I should see 10 results per page. But it is not working.

Would you please tell me how can I achieve this? Thanks.

Answer 1

I think you need to trigger the search. Have you tried completing this tutorial where it says:

"After you have installed InstantSearch.js to your application’s dependencies, we need to instantiate the InstantSearch.js library into an Angular service."

Then you can leverage the instantsearch service in AppComponent:

...
import { InstantSearchService } from './services/instantsearch.service';
...
export class AppComponent {
...
    updateParameter() {
        ...
        this.instantSearchService.search.start(); // trigger the search
    }
}