Skip to content

Combination Operators (Pipeable Operators) ​

RxJS's Combination Operators are powerful tools for combining multiple Observables to create new streams.

IMPORTANT

This page covers Pipeable Operators (form used in pipelines).

For Creation Functions (form that creates a new Observable from multiple Observables), see Chapter 3: Creation Functions.

Creation Functions vs Pipeable Operators ​

Functions related to combination are provided in two forms.

Creation Functions (explained in Chapter 3) ​

Receives multiple Observables as arguments and creates a new Observable.

typescript
import { concat, merge, combineLatest, zip, race, forkJoin } from 'rxjs';

// Use as Creation Function
const combined$ = concat(obs1$, obs2$, obs3$);
const merged$ = merge(source1$, source2$);

See Creation Functions for details.

Pipeable Operators (explained on this page) ​

Used in .pipe() for existing Observable.

typescript
import { concatWith, mergeWith, combineLatestWith } from 'rxjs';

// Use as Pipeable Operator
const result$ = source$.pipe(
  map(x => x * 2),
  concatWith(other$),
  filter(x => x > 10)
);

List of Pipeable Operators ​

◾ Operators Covered on This Page ​

OperatorDescription
withLatestFromCombines the latest values of other streams according to the emission of the main Observable
mergeAllFlatten Higher-order Observable in parallel
concatAllFlatten Higher-order Observable sequentially
switchAllSwitch to the latest Higher-order Observable
exhaustAllIgnore new Higher-order Observable during execution
combineLatestAllCombine the latest values of all internal Observables
zipAllPair the corresponding values of each internal Observable

◾ Provided as Creation Functions ​

The following are mainly used as Creation Functions (see Chapter 3).

FunctionDescriptionPipeable Version
concatCombine sequentiallyconcatWith (RxJS 7+)
mergeCombine in parallelmergeWith (RxJS 7+)
combineLatestCombine latest valuescombineLatestWith (RxJS 7+)
zipPair corresponding valueszipWith (RxJS 7+)
raceAdopt the fastest streamraceWith (RxJS 7+)
forkJoinWait for all to complete(No Pipeable version)

For Those Who Want to Learn in a More Practical Way ​

For realistic scenario examples using combination operators, see Practical Use Cases for detailed information.

Lançado sob a licença CC-BY-4.0.