zip

Combines multiple observables by pairing their emissions by index. Waits for all sources to emit their nth value before emitting the nth tuple. Completes once a completed source has no value left to pair, as RxJS’s zip does: at once if it completes with nothing queued, otherwise after the tuple that takes its last queued value.

Marble Diagram

zip

Example

//  Timeline:
//
//  letters$  'A'       'B'       'C'
//  numbers$  1         2         3
//  zipped$   ['A',1]   ['B',2]   ['C',3]
//
//  Explanation:
//  - zip pairs values by their index from multiple sources
//  - Waits for all sources to emit at the same index
//  - Completes once a completed source has no value left to pair

const [letters$, setLetter] = createState<string>('A');

const [numbers$, setNumber] = createState<number>(1);

const zipped$ = zip([letters$, numbers$]);

const valueHistory: (readonly [string, number])[] = [];

zipped$.subscribe(([letter, num]) => {
    valueHistory.push([letter, num]);
});

for (const letter of ['B', 'C']) {
    setLetter(letter);
}

for (const num of [2, 3]) {
    setNumber(num);
}

assert.deepStrictEqual(valueHistory, [
    ['A', 1],
    ['B', 2],
    ['C', 3],
]);

View source on GitHub