Angular 6.1 – KeyValuePipe

Angular version 6.1 was released last week. It is a minor release so you can go ahead an use it as a drop-in replacement for 6.0 (run ng update @angular/core @angular/cli).

Apart from bug fixes and performance tweaks there a three new features



The KeyValuePipe lets you iterate over any object representing a key-value pair. Previously, you could only iterate over arrays.

For example:

The output looks like this…

Here is an example on StackBlitz, here is a YouTube video by Stephen Fluin and here is a link to the official documentation.


The eagle-eyed amongst you may have noticed that KeyValuePipe can take a Map object. I hadn’t heard of the Map object before so I did a little bit of research.

Map is an ES6 feature. It holds key-value pairs ([[ 1, ‘one’ ],[ 2, ‘two’ ]]) and it makes key-value pairs super simple to add, remove and iterate through.

If you would like to know more head over to the MDN Web Docs.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.