What's the suggested way to connect to a parametrized Observable?

[riker09]

I'm looking for a good solution for how to connect to an Observable that dependes on some other value(s).

type MyState = {
  paramA?: string;
  paramB?: number;
  data: unknown[];
}

@Component({
  standalone: true,
  templateUrl: './my.component.html',
})
export class MyComponent extends SignalState<MyState> {
  myApi = inject(MyApi);

  constructor() {
    super();
    this.initialize({
      data: [],
      paramA: undefined,
      paramB: undefined,
    });

    this.connectObservables({
      data: this.myApi.apiMethodWithParams(this.paramA(), this.paramB()),
    });
  }
}

This does not work as intended as the values are read from the signals when the component is initialized. But they are not reactive, e.g. further changes to the param Signals do not trigger the Observable.

I did consider using effect().

export class MyComponent extends SignalState<MyState> {
  private readonly _ = effect(() => {
    const { paramA, paramB } = this.selectMany(['paramA', 'paramB']);
    this.trigger('data');
  })
}

But I don't see how I can pass new data from the Signals here.

I feel that the solution is something trivial that I completely overlooked. 😅

[simplifiedcourses]

Hi there!
I'd personally still use an observable for that.

const params$ = toObservable(this.selectMany('['paramA', 'paramB']))
const data$ = this params$.pipe(switchMap(params => yourCall(params))
this.connectObservables({
 data: data$
})

Does that make sense to you?

[riker09]

It does. Thank you for the quick response.