rxjs / latest / api / index / function / pairwise.html

pairwise

function stable operator

Groups pairs of consecutive emissions together and emits them as an array of two values.

pairwise<T>(): OperatorFunction<T, [T, T]>

Parameters

There are no parameters.

Returns

OperatorFunction<T, [T, T]>: A function that returns an Observable of pairs (as arrays) of consecutive values from the source Observable.

Description

Puts the current value and previous value together as an array, and emits that.

pairwise marble diagram

The Nth emission from the source Observable will cause the output Observable to emit an array [(N-1)th, Nth] of the previous and the current value, as a pair. For this reason, pairwise emits on the second and subsequent emissions from the source Observable, but not on the first emission, because there is no previous value in that case.

Example

On every click (starting from the second), emit the relative distance to the previous click

import { fromEvent, pairwise, map } from 'rxjs';

const clicks = fromEvent<PointerEvent>(document, 'click');
const pairs = clicks.pipe(pairwise());
const distance = pairs.pipe(
  map(([first, second]) => {
    const x0 = first.clientX;
    const y0 = first.clientY;
    const x1 = second.clientX;
    const y1 = second.clientY;
    return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
  })
);

distance.subscribe(x => console.log(x));

See Also

© 2015–2022 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors.
Code licensed under an Apache-2.0 License. Documentation licensed under CC BY 4.0.
https://rxjs.dev/api/index/function/pairwise