Refinement doesn't happen when I keypress the first letter using the autocomplete widget

I am using autocomplete widget with Angular, I have based on this example,
if I write a word the search is done up to the penultimate letter, I must write the word twice so that it works.

I attach a little code.

// component.Html
<input type="text" #destination (keyup)="handleChange($event)" (keyup.enter)="keyupEnter($event)" placeholder="¿A dónde?" autocomplete="null"/>
    <div *ngFor="let index of state.indices">
      <div class="row" *ngFor="let option of index.hits" (click)="onOptionSelection.emit(option)">
        <span class="icon" [ngSwitch]="option.location_type">
          <i class="fas fa-city" *ngSwitchCase="'city'"></i>
          <i class="fas fa-flag" *ngSwitchCase="'country'"></i>
          <i class="fas fa-globe-europe" *ngSwitchCase="'continent'"></i>
          <i class="fas fa-globe" *ngSwitchDefault></i>
        <p class="text">
          <span class="name">{{ option | nameByLang: locale }}</span>
          <span class="extra" *ngIf="">{{ | nameByLang: locale }}</span>

// component.Ts
changeDetection: ChangeDetectionStrategy.OnPush
state: {
    query: string;
    refine: Function;
    indices: any[];
  destinationWord = '';

    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent,
    @Inject(LOCALE_ID) public locale: string
  ) {

  public ngOnInit() {
    this.createWidget(connectAutocomplete, {});

  ngAfterViewInit() {

  public handleChange($event: KeyboardEvent) {
    this.destinationWord = ($ as HTMLInputElement).value + ' ';
  keyupEnter($event) {

Can you reproduce the behavior you currently have by forking this sandbox? It’ll be easier to help you achieve the expected result.

In this sandbox I reproduce the problem (
Additionally I want to filter by a hit type that I receive, I have placed the filter in the html with * ngIf, how should I do it from the component side, is in the searchFunction ?, if you can put a simple filter in the responses (something type > 5)

You don’t seem to follow the initial sandbox since you don’t use the same technique, leveraging connectAutocomplete. I’d recommend starting from there.

Regarding your second question, can you provide what you have so far?

I started from the initial Sandbox, eliminate the unnecessary and added the OnPush strategy in automcomplete … ts and app.component.ts. If you look at the autocomplete component you will see this.createWidget (connectAutocomplete).

My code is very similar to that of the Sandbox except that by adding style classes, we receive options in the hits, and those options have properties such as the name, I have a type property in my results, and I just want to show the results of a certain type.
my code in the html is as follows:

<ng-container *ngFor="let option of index.hits">

<div class=“row” *ngIf=“option.location_type == ‘city’” (click)=“onOptionSelection.emit(option)”>

          <span class="icon">

            <i class="fas fa-city"></i>


          <p class="text">

            <span class="name">{{ option | nameByLang: locale }}</span>

            <span class="extra" *ngIf="">{{ | nameByLang: locale }}</span>




Hi @juanjco2

Please look at the example above I just made.
From autocomplete.component.ts,


It passes the whole hit object.

And in app.component.ts,

  public setQuery(hit) {
    console.log({ hit });
    this.searchParameters = {
      facetFilters: ["brand:" + hit.brand]

It uses the information from the hit and apply query and facetFilters.
Is it what you intend to do?
Please correct me if I don’t understand correctly.

Let me know how it goes!

No, I only have the mat-autocomplete, nothing else, and when I receive results after the keypress I want to filter these hits. Each option in this example have the property price, I only want to show the options that are > to 40.
How do I do that? use this sandbox

You shouldn’t filter the results set from the front-end. You should rather use Algolia’s filtering:

With angular-instantsearch v3, you can provide a custom searchFunction to <ais-instantsearch>:
This searchFunction gives you access to the internal helper, which allows you to add filters for your query:

In your case something like this should work:

    searchFunction: helper => {
      const page = helper.getPage();
      helper.addNumericRefinement('price', '>', 40);