KeyValuePipe
pipe
impure
Transforms Object or Map into an array of key value pairs.
Template:Input expression
Exported from
-
CommonModule
Input value
input
|
ReadonlyMap |
Parameters
compareFn
|
(a: KeyValue, b: KeyValue) => number
|
Optional. Default is defaultComparator .
|
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.
Further information available in the Usage Notes...
Usage notes
Examples
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://v11.angular.io/api/common/KeyValuePipe