KeyValuePipe
pipe
Transforms Object or Map into an array of key value pairs.
constructor
KeyValuePipe
@returns
KeyValuePipe
transform
7 overloads@paraminput
ReadonlyMap<K, V>
@returns
KeyValue<K, V>[]
@paraminput
Record<K, V>
@returns
KeyValue<string, V>[]
@paraminput
Record<K, V> | ReadonlyMap<K, V>
@returns
KeyValue<K, V>[]
@paraminput
null | undefined
@paramcompareFn
((a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number) | null | undefined
@returns
null
@paraminput
ReadonlyMap<K, V> | null | undefined
@returns
KeyValue<K, V>[] | null
@paraminput
Record<K, V> | null | undefined
@returns
KeyValue<string, V>[] | null
Description
Transforms Object or Map into an array of key value pairs.
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.
Passing null
as the compareFn will use natural ordering of the input.
Exported by
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> @for (item of object | keyvalue; track item.key) { <div>{{ item.key }}:{{ item.value }}</div> } <p>Map</p> @for (item of map | keyvalue; track item.key) { <div>{{ item.key }}:{{ item.value }}</div> } <p>Natural order</p> @for (item of map | keyvalue : null; track item.key) { <div>{{ item.key }}:{{ item.value }}</div> }</span>`, standalone: false,})export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([ [2, 'foo'], [1, 'bar'], ]);}
Jump to details