@angular/common

KeyValuePipe

pipe

Transforms Object or Map into an array of key value pairs.

API

  
    class KeyValuePipe implements PipeTransform {
}

transform

7 overloads

@paraminputReadonlyMap<K, V>

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[]

@paraminputRecord<K, V>

@paramcompareFn((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined

@returnsKeyValue<string, V>[]

@paraminputRecord<K, V> | ReadonlyMap<K, V>

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[]

@paraminputnull | undefined

@paramcompareFn((a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number) | null | undefined

@returnsnull

@paraminputReadonlyMap<K, V> | null | undefined

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[] | null

@paraminputRecord<K, V> | null | undefined

@paramcompareFn((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined

@returnsKeyValue<string, V>[] | null

@paraminputRecord<K, V> | ReadonlyMap<K, V> | null | undefined

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, 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

CommonModule

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>    <p>Natural order</p>    <div *ngFor="let item of map | keyvalue: null">{{ 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'],  ]);}