Angular 6.1 introduces a new KeyValue Pipe

Angular 6.1 is out and it introduces a new KeyValue pipe to help you iterate through objects, maps, and arrays. Today, the ngFor directive doesn’t support iterations over objects or Maps. To fix this issue, Angular 6.1 introduces a new KeyValue pipe. The KeyValue pipe converts an Object or Map into an array of key-value pairs to use with ngFor directive. In this post, we’ll find out how to use this new KeyValue pipe with Angular 6.1 with examples.

Angular 6.1 introduces a new KeyValue Pipe

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

As mentioned earlier, the KeyValue pipe converts the object or map into an array of key-value pairs. It also sorts the array based on the keys in the following order:

First in alphabetical order if keys are strings

then by their value if numbers

then by their boolean value if boolean.

You can also define a custom compare function to manipulate the order based on your requirements. Let’s see how to use it.

The following angular code defines an object, a map, and an array in the app component. It also has a descOrder function for custom ordering. This function will be used for custom ordering of the arrTest array.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  testObject: { [key: number]: string } =
  {
    1: 'Object Value 1',
    2: 'Object Value 2',
    3: 'Object Value 3'
  };

  testMap = new Map([
    [2, 'Map Value 2'],
    [null, 'Map Value 3'],
    [1, 'Map Value 1'],
  ]);

  arrTest = ["Array Item 1",
    "Array Item 2",
    "Array Item 3"]

  descOrder = (a, b) => {
    if(a.key < b.key) return b.key;
  }
}

A couple of things to notice here:

• The testObject has all the keys present in ascending order.
• The testMap has an element with null key and entries are in a random order. The null or undefined keys will be displayed at the end.
• The arrTest array has only values. There are no keys present. The pipe will add the keys starting from 0.

In the HTML, loop through the object, map and array (with custom ordering) using *ngFor and keyvalue pipe.

<p>Object & KeyValue Pipe</p>
<div *ngFor="let item of testObject | keyvalue">
	Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

<p>Maps & KeyValue Pipe</p>
<div *ngFor="let item of testMap | keyvalue">
	Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

<p>Arrays & KeyValue Pipe</p>
<div *ngFor="let item of arrTest | keyvalue:descOrder">
	Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

You should see the following output when you run the app.

As you can see, the key’s order for array items is in a descending manner due to the custom ordering applied to the array’s keyvalue pipe. You can check the working demo here.

Interested in learning Angular 6, you can read all my angular 6 post here.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then