Introducing the New KeyValuePipe in Angular
Angular version 6.1 has been released and it’s shipped with a new useful pipe — KeyValuePipe .
As you probably know, the ngFor directive doesn’t support iterations over objects or Maps. But there are many times when we need this kind of functionality.
The KeyValuePipe was created to address this issue. It transforms an Object or a Map into an array of key-value pairs so we can use ngFor on it.
Let’s see how we can use it:
The result of the pipe’s conversion looks like this:
Let’s see how we can use it with Map.
By default, the output array will be ordered by keys (Unicode point value). Here are examples of arrays that were created based on the default alphanumerical order:
But you can always override that by passing a compareFn as the second input, if you need a custom ordering.
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
