Revision history [back]

The keyvalue pipe in Angular can be used to iterate and sort the properties of an object. To sort the properties in order, the pipe can be combined with the Angular orderBy pipe.

First, import the orderBy pipe from '@angular/common' in the component where the properties will be displayed.

Then, when iterating over the object properties using the keyvalue pipe, add the orderBy pipe and provide the property key to sort by. For example, to sort the properties alphabetically by key:

<div *ngFor="let item of myObject | keyvalue | orderBy:'key'">
  <p>{{item.key}}: {{item.value}}</p>
</div>

This will sort the properties in alphabetical order of the key. The orderBy pipe can also be used to sort by value, and to reverse the order.