mergeFrom

The mergeFrom function 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.

Examples

Example 1: Basic Usage

Merge multiple signals or observables:

import {mergeFrom} from 'ngx-lift';
import {signal} from '@angular/core';
import {of, delay} from 'rxjs';

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

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

Example 2: With RxJS Pipe Operator

Pass an RxJS pipe operator to manipulate the emitted values:

import {mergeFrom} from 'ngx-lift';
import {signal} from '@angular/core';
import {of, delay, pipe, switchMap} from 'rxjs';

export class MergeFromComponent {
  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~`))));
}

Example 3: Handle Asynchronous Code

Use startWith or initialValue option to handle async observables:

import {mergeFrom} from 'ngx-lift';
import {signal} from '@angular/core';
import {of, delay, pipe, switchMap, startWith} from 'rxjs';

export class MergeFromComponent {
  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),
    ),
  );
}

API Reference

mergeFrom

Merges multiple Observables or Signals into a single Signal that emits the latest value from any source, similar to merge but with Signal support.

Signature

mergeFrom<T>(
  sources: Record<string, Observable<T> | Signal<T>> | Array<Observable<T> | Signal<T>>,
  operator?: OperatorFunction,
  options?: MergeFromOptions
): Signal<T>

Parameters

sources: Record<string, Observable<T> | Signal<T>> | Array<Observable<T> | Signal<T>>
An object or array of Observables or Signals to merge. When an object is provided, the result will be an object with the same keys.
operator?: OperatorFunction
(Optional) An RxJS pipe operator to manipulate the emitted values before they are emitted.
options?: MergeFromOptions
(Optional) Configuration options including initialValue and injector.

Returns

A signal that emits the latest value from any of the source observables or signals.