Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

KeyValuePipe

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

See more...

      
      {{ input_expression | keyvalue [ : compareFn ] }}
    

Exported from

Input value

input { [key: string]: V; [key: number]: V; } | ReadonlyMap<K, V>

Parameters

compareFn (a: KeyValue<K, V>, b: KeyValue<K, V>) => 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 is 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'],
  ]);
}