KeyValuePipe
Transforms Object or Map into an array of key value pairs.
{{ input_expression | keyvalue [ : compareFn ] }}
NgModule
Input value
input | null | {
[key: string]: V;
[key: number]: V;
} | Map |
Parameters
compareFn | (a: KeyValue |
Optional. Default is |
Description
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.
Usage notes
Examples
This examples show how an Object or a Map and 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']]);
- }