keyvalue pipe

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.