mergeFrom

mergeFrom is a helper function that merges the values of Observables or Signals and emits the latest value. It also allows for modifying the emitted value using RxJS operators before it is emitted.

While it is similar to merge(), it also takes Signals into account.

mergeFrom is akin to combineFrom, but instead of emitting a combined value, it emits the latest emitted value using the merge operator rather than combineLatest.

Usage

• Merge multiple Signals
• Merge multiple Observables
• Merge multiple Signals and Observables
• Using initialValue param

Basic Usage: Merge the signals or observables

You have the flexibility to pass multiple signals or observables to the function.

import {mergeFrom} from 'ngx-lift';

export class MergedFromComponent {
  a = signal(1);
  b$ = of(2).pipe(delay(1000));

  // emit 1, after 1s emit 2
  mergedArray = mergeFrom([this.a, this.b$]);
}

Pass a RxJS pipe operator

You have the option to pass an RxJS pipe operator, which enables you to manipulate the emitted values as needed. This provides a flexible and powerful way to customize the behavior of the emitted data.

import {mergeFrom} from 'ngx-lift';

export class MergedFromComponent {
  a = signal(1);
  b$ = of(2).pipe(delay(1000));

  // 1 is coming~. After 1s, emit "2 is coming~"
  mergedOperator = mergeFrom([this.a, this.b$], pipe(switchMap((res) => of(`${res} is coming~`))));
}

Handle asynchronous code by startWith or initialValue option

To define the starting value of the resulting Signal and prevent potential errors with real async Observables, you can employ the initialValue parameter within the third argument options object. Alternatively, you can address this issue by utilizing the startWith operator within the pipe, ensuring that the Observable always begins with a specified initial value, as demonstrated below.

import {mergeFrom} from 'ngx-lift';

export class MergedFromComponent {
  a = signal(1);
  b$ = of(2).pipe(delay(1000));

  // initially display "loading". After 1s, emit "2 is coming~"
  mergedWithInitialValue = mergeFrom(
    [this.a, this.b$],
    pipe(switchMap((res) => of(`${res} is coming~`).pipe(delay(1000)))),
    {initialValue: 'loading'}, // pass the initial value of the resulting signal
  );

  // initially display 0. After 1s, display "2 is coming~"
  mergedStartWith = mergeFrom(
    [this.a, this.b$],
    pipe(
      switchMap((res) => of(`${res} is coming~`).pipe(delay(1000))),
      startWith(0),
    ),
  );
}