new function for signal/rxjs interop

[ymajoros]

Which @angular/* package(s) are relevant/related to the feature request?

@angular/core

Description

I propose some function to run some computation that returns an Observable, and convert it to a signal.

Typical workflow:

• inputs = signals
• when they change, run some computation (typically, http requests)
• convert to a signal

Proposed solution

export function computedFromObservable<T>(computation: () => Observable<T>, options?: CreateComputedOptions<Observable<T>>): Signal<T | undefined> {
  const computedSignal = computed(computation, options);
  const computedObservable = toObservable(computedSignal);
  const observable = computedObservable.pipe(
    switchAll()
  );
  return toSignal(observable);
}

which can be used this way:

    this.productPage = computedFromObservable(() => this.productService.find$(this.productSearch(), this.pagination()));

... replacing this more complicated construct:

    const productParams: Signal<[ProductSearch, Pagination]> = computed(() => [this.preparationSearch(), this.pagination()]);
    const productPageObservable = toObservable(productParams).pipe(
      switchMap(([productSearch, pagination]) => this.productService.find$(productSearch, pagination))
    );
    this.productPage = toSignal(productPageObservable);

Alternatives considered

Originally, I something like this, but it lacked the power of computed() (single signal as input often requiring to create an additional computed() signal anyway, not as lazy, ...):

export function pipeSignalWithDefault<T, U>(signal: Signal<T>, pipe: OperatorFunction<T, U>, initialValue: U): Signal<U> {
  const signalAsObservable = toObservable(signal);
  const signalPipe = signalAsObservable.pipe(pipe);

  return toSignal(signalPipe, {initialValue});
}

[alxhub]

Alternatively, toObservable could be relaxed to take () => T instead of Signal<T> - there's no technical reason why it needs to be a single signal...

[ymajoros]

Alternatively, toObservable could be relaxed to take () => T instead of Signal<T> - there's no technical reason why it needs to be a single signal...

Yes, but I'm not sure I understand how it solves the problem. I do like the computed() semantics, but it happens that the typical (e.g. http) internal result is an Observable.

[ymajoros]

I added some explanation about usage. Here is an example:

    this.productPage = computedFromObservable(() => this.productService.find$(this.productSearch(), this.pagination()));

... replacing this more complicated construct:

    const productParams: Signal<[ProductSearch, Pagination]> = computed(() => [this.preparationSearch(), this.pagination()]);
    const productPageObservable = toObservable(productParams).pipe(
      switchMap(([productSearch, pagination]) => this.productService.find$(productSearch, pagination))
    );
    this.productPage = toSignal(productPageObservable);

[Csellers15]

+1 on this