pipe impure

Transforms Object or Map into an array of key value pairs.

See more...

{{ input_expression | keyvalue [ : compareFn ] }}

Exported from

Input value

input { [key: string]: V; [key: number]: V; } | ReadonlyMap<K, V>


compareFn (a: KeyValue<K, V>, b: KeyValue<K, V>) => number

Optional. Default is defaultComparator.


The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types.

Further information is available in the Usage Notes...

Usage notes


This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe.

  selector: 'keyvalue-pipe',
  template: `<span>
    <div *ngFor="let item of object | keyvalue">
    <div *ngFor="let item of map | keyvalue">
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.