Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item,
using a property accessed by using the key provided to check if the two items are distinct.
distinctUntilKeyChanged<T, K extends keyof T>(key: K, compare?: (x: T[K], y: T[K]) => boolean): MonoTypeOperatorFunction<T>
Parameters
key |
String key for object property lookup on each item.
|
compare |
Optional. Default is undefined .
Optional comparison function called to test if an item is distinct from the previous item in the source.
|
Returns
MonoTypeOperatorFunction<T>
: An Observable that emits items from the source Observable with distinct values based on the key specified.
Description
It's like distinctUntilChanged
, but the distinct comparison uses a key to access a property.

distinctUntilKeyChanged
emits all items of the source Observable, wich are distinct by comparison.
The comparison checks if the previous item is distinct from the current item, using a key
to access a property.
If a comparator function is provided, then it will be called for each item with the property key
to test for whether or not that value should be emitted.
Examples
An example comparing the name of persons
import { of } from 'rxjs';
import { distinctUntilKeyChanged } 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(
distinctUntilKeyChanged('name'),
)
.subscribe(x => console.log(x));
// displays:
// { age: 4, name: 'Foo' }
// { age: 7, name: 'Bar' }
// { age: 5, name: 'Foo' }
An example comparing the first letters of the name
import { of } from 'rxjs';
import { distinctUntilKeyChanged } from 'rxjs/operators';
interface Person {
age: number,
name: string
}
of<Person>(
{ age: 4, name: 'Foo1'},
{ age: 7, name: 'Bar'},
{ age: 5, name: 'Foo2'},
{ age: 6, name: 'Foo3'},
).pipe(
distinctUntilKeyChanged('name', (x: string, y: string) => x.substring(0, 3) === y.substring(0, 3)),
)
.subscribe(x => console.log(x));
// displays:
// { age: 4, name: 'Foo1' }
// { age: 7, name: 'Bar' }
// { age: 5, name: 'Foo2' }