{ "id": "api/common/KeyValuePipe", "title": "KeyValuePipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

KeyValuePipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

\n\n

See more...

\n
\n \n \n \n
\n {{ input_expression | keyvalue [ : compareFn ] }}\n\n

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n input\n { [key: string]: V; [key: number]: V; } | ReadonlyMap\n \n \n
\n \n \n

Parameterslink

\n \n \n \n \n \n \n \n \n \n
\n \n compareFn\n (a: KeyValue, b: KeyValue) => number\n

Optional. Default is defaultComparator.

\n \n
\n \n
\n\n\n \n\n \n\n
\n

Descriptionlink

\n

The output array will be ordered by keys.\nBy default the comparator will be by Unicode point value.\nYou can optionally pass a compareFn if your keys are complex types.

\n\n

Further information available in the Usage Notes...

\n
\n\n\n \n
\n

Usage noteslink

\n

Exampleslink

\n

This examples show how an Object or a Map can be iterated by ngFor with the use of this\nkeyvalue pipe.

\n\n@Component({\n selector: 'keyvalue-pipe',\n template: `<span>\n <p>Object</p>\n <div *ngFor=\"let item of object | keyvalue\">\n {{item.key}}:{{item.value}}\n </div>\n <p>Map</p>\n <div *ngFor=\"let item of map | keyvalue\">\n {{item.key}}:{{item.value}}\n </div>\n </span>`\n})\nexport class KeyValuePipeComponent {\n object: {[key: number]: string} = {2: 'foo', 1: 'bar'};\n map = new Map([[2, 'foo'], [1, 'bar']]);\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }