RangeConnector : Cannot read properties of undefined (reading 'range')

[johnico]

i am trying to connect the basic rangeConnector - copy paste from the docs

https://www.algolia.com/doc/api-reference/widgets/range-input/angular/

but i got :
Cannot read properties of undefined (reading 'range')

looks like the state is undefined

code: exactly the same from the docs

wrapper:

<ais-instantsearch [config]="config">
      <app-range-input></app-range-input>
</ais-instantsearch>

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectRange, { RangeWidgetDescription, RangeConnectorParams } from 'instantsearch.js/es/connectors/range/connectRange';

@Component({
  selector: 'app-range-input',
  template: `
    <div *ngIf="state.range">
      from
      <input type="number" #min [value]="state.start[0]" min="state.range.min" max="state.range.max" />
      to
      <input type="number" #max [value]="state.start[1]" min="state.range.min" max="state.range.max" />
      <button (click)="state.refine([1, 2])">Go</button>
    </div>
  `,
})
export class RangeInputComponent extends TypedBaseWidget<RangeWidgetDescription, RangeConnectorParams> {
  public state: RangeWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RangeInput');
  }
  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      //attribute: 'price',
    });
    super.ngOnInit();
  }
}

[Haroenv]

There's a couple things missing in that example, sorry! I'll have to do a whole pass because everywhere seems to be missing the instantiation of state. Here's a working example: https://codesandbox.io/s/thirsty-gianmarco-gj7fqg?file=/src/app/range.component.ts

import { Component, Inject, forwardRef, Optional } from "@angular/core";
import {
  TypedBaseWidget,
  NgAisInstantSearch,
  NgAisIndex
} from "angular-instantsearch";

import connectRange, {
  RangeWidgetDescription,
  RangeConnectorParams
} from "instantsearch.js/es/connectors/range/connectRange";

@Component({
  selector: "app-range",
  template: `
    <div>
      <form
        (submit)="$event.preventDefault(); state.refine([min.value, max.value])"
      >
        from
        <input
          type="number"
          #min
          [value]="state.start[0]"
          [min]="state.range.min"
          [max]="state.range.max"
          [placeholder]="state.range.min"
        />
        to
        <input
          type="number"
          #max
          [value]="state.start[1]"
          [min]="state.range.min"
          [max]="state.range.max"
          [placeholder]="state.range.max"
        />
        <button>Go</button>
      </form>
    </div>
  `
})
export class RangeComponent extends TypedBaseWidget<
  RangeWidgetDescription,
  RangeConnectorParams
> {
  public state: RangeWidgetDescription["renderState"] = {
    start: [-Infinity, Infinity],
    range: { min: 0, max: 0 },
    refine: () => {},
    canRefine: false,
    sendEvent: () => {},
    format: {
      from(fromValue) {
        return fromValue.toLocaleString();
      },
      to(toValue) {
        return toValue.toLocaleString();
      }
    }
  };

  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super("Range");
  }

  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      attribute: "price"
    });
    super.ngOnInit();
  }
}

[johnico]

works, thanks

[johnico]

@Haroenv hi
i took your code as is and I see that the refine is not working at all
i dont understand how to make it works . when i debug i see that the refine is practicly nothing and nothing happen in the debugger

also i got error

 Type 'string' is not assignable to type 'RangeMax'.

10       <form (submit)="$event.preventDefault(); state.refine([min.value, max.value])">

so i created a onSubmit() function and created "any" but still the refine does not trigger

the refine is working on other connectors like toggle, paging .. etc
the code is practically the same
could you assist?

[johnico]

@Haroenv could i use it for timestamps?

[Haroenv]

Can you create a sandbox with it not working? as refine does have an effect for me in the higher shared link.

Yes, you can use it for timestamps, but will need to make sure they're stored as an integer in the index.