GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing angular.dev — KeyValuePipe • Angular

Pipe usage

{{ value_expression | keyvalue:compareFn }}

API

    
      class KeyValuePipe implements PipeTransform {
}

@paramdiffersKeyValueDiffers

@returnsKeyValuePipe

@paraminputReadonlyMap<K, V>

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

@returnsKeyValue<K, V>[]

@paraminputRecord<K, V> | ReadonlyMap<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>[]

@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> | ReadonlyMap<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

@paraminputT

@paramcompareFn(T extends object ? (a: T[keyof T], b: T[keyof T]) => number : never) | undefined

@returnsT extends object ? KeyValue<keyof T, T[keyof T]>[] : 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',
  imports: [KeyValuePipe],
  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>`,
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([
    [2, 'foo'],
    [1, 'bar'],
  ]);
}

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.