keyvalue pipe

This is the documentation for Angular 6.
You can switch to the latest version Angular 10.

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

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

Source

<p>Object</p>
<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
  {{item.key}}:{{item.value}}
</div>

export class AppComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

Result

Object

1:bar

2:foo

Map

1:bar

2:foo

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.