combineFrom

combineFrom is a utility function that takes an array or object of Observables or Signals and produces a Signal that emits the aggregated value from these sources. This function operates akin to combineLatest, yet it extends its functionality to include Signals in the amalgamation process. Normally, it requires invocation within an injection context. However, it offers the flexibility to be called outside of such contexts by providing the Injector within the third argument options object. In cases where an Observable doesn't emit synchronously, you can utilize the startWith operator to modify the initial emitted value, or alternatively specify an initialValue within the options object.

Usage

Combine multiple Signals
Combine multiple Observables
Combine multiple Signals and Observables
Using initialValue param

Basic Usage: combine the signals or observables

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

import {combineFrom} from 'ngx-lift';

export class CombineFromComponent {
  a = signal(1);
  b$ = new BehaviorSubject(2);

  // array type
  combinedArray = combineFrom([this.a, this.b$]); // [1, 2]

  // object type
  combinedObject = combineFrom({a: this.a, b: this.b$}); // {a: 1, b: 2}
}

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 {combineFrom} from 'ngx-lift';

export class CombineFromComponent {
  a = signal(1);
  b$ = new BehaviorSubject(2);

  combineOperator = combineFrom(
    [this.a, this.b$],
    pipe(switchMap(([a, b]) => of(a + b))),
  ); // 3
}

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 {combineFrom} from 'ngx-lift';

export class CombineFromComponent {
  a = signal(1);
  b$ = new BehaviorSubject(2);

  // initially 0, after 1s value changes to 3
  combinedWithInitialValue = combineFrom(
    [this.a, this.b$],
    pipe(
      switchMap(
        ([a, b]) => of(a + b).pipe(delay(1000)), // later async emit value
      ),
    ),
    {initialValue: 0}, // pass the initial value of the resulting signal
  );

  // initially 0, after 1s value changes to 3
  combinedStartWith = combineFrom(
    [this.a, this.b$],
    pipe(
      switchMap(([a, b]) => of(a + b).pipe(delay(1000))),
      startWith(0),
    ),
  );
}

Rare Usage: Pass a function, promise, Map, array

import {combineFrom} from 'ngx-lift';

export class CombineFromComponent {
  // initially 0, will be 3 after 1s
  rareUsage = combineFrom(
    [() => 1, new Promise((resolve) => resolve(2))],
    pipe(
      switchMap(([a, b]) => of(a + (b as number)).pipe(delay(1000))),
      startWith(0),
    ),
  );
}

Real Example: Get filtered data

In the "get users" request below, the response returns 9 users. We intend to display only the first 3 users. Any client-side filtering, sorting can use the same strategy.

import {combineFrom} from 'ngx-lift';

@Component({
  template: `
    @if (usersState()?.loading) {
      <cll-spinner />
    }

    @if (usersState()?.error; as error) {
      <cll-alert [error]="error" />
    }

    @if (usersState()?.data; as users) {
      <div class="card-grid">
        @for (user of users; track user.id.value) {
          <app-user-card [user]="user" />
        }
      </div>
    }`
})
export class CombineFromComponent {
  private userService = inject(UserService);
  count = signal(3);

  usersState = combineFrom(
    [this.count, this.userService.getUsers({results: 9})],
    pipe(
      switchMap(([count, users]) => of(users.results.slice(0, count))),
      createAsyncState(),
    ),
  );
}

Name: Dirce da Cunha
Gender: female

Name: Marcus Andersen
Gender: male

Name: Svobodan Kolodnickiy
Gender: male