W3cubDocs

/RxJS

distinctUntilChanged

function stable

Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.

distinctUntilChanged<T, K>(compare?: (x: K, y: K) => boolean, keySelector?: (x: T) => K): MonoTypeOperatorFunction<T>

Parameters

compare

Optional. Default is undefined.

Optional comparison function called to test if an item is distinct from the previous item in the source.

keySelector

Optional. Default is undefined.

Type: (x: T) => K.

Returns

MonoTypeOperatorFunction<T>: An Observable that emits items from the source Observable with distinct values.

Description

It's like filter, but just emits the values that are distinct from the previous.

distinctUntilChanged marble diagram

If a comparator function is provided, then it will be called for each item to test for whether or not that value should be emitted. If a comparator function is not provided, an equality check is used by default.

Example

A simple example with numbers

import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

of(1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 4).pipe(
    distinctUntilChanged(),
  )
  .subscribe(x => console.log(x)); // 1, 2, 1, 2, 3, 4

An example using a compare function

import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

interface Person {
   age: number,
   name: string
}

of<Person>(
    { age: 4, name: 'Foo'},
    { age: 7, name: 'Bar'},
    { age: 5, name: 'Foo'},
    { age: 6, name: 'Foo'},
  ).pipe(
    distinctUntilChanged((p: Person, q: Person) => p.name === q.name),
  )
  .subscribe(x => console.log(x));

// displays:
// { age: 4, name: 'Foo' }
// { age: 7, name: 'Bar' }
// { age: 5, name: 'Foo' }

See Also

© 2015–2018 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/operators/distinctUntilChanged