pipe
impure
Transforms Object or Map into an array of key value pairs.
{{ input_expression | keyvalue [ : compareFn ] }}
input | { [key: string]: V; [key: number]: V; } | ReadonlyMap |
compareFn | (a: KeyValue | Optional. Default is |
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...
This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe.
@Component({ selector: 'keyvalue-pipe', template: `<span> <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> </span>` }) export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/common/KeyValuePipe