angular keyvalue pipe sort properties / iterate in order
According to the Angular documentation, the keyvalue
pipe sorts the items by key
order by default. You can provide a comparer function to change that order, and sort the items according to the key
, to the value
, or to the entry order of the properties in the object.
The following comparer functions sort the items in various orders:
// Preserve original property order
originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return 0;
}
// Order by ascending property value
valueAscOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return a.value.localeCompare(b.value);
}
// Order by descending property key
keyDescOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
}
when applied to the keyvalue
pipe:
<div *ngFor="let item of object | keyvalue: originalOrder">
{{item.key}} : {{item.value}}
</div>
<div *ngFor="let item of object | keyvalue: valueAscOrder">
{{item.key}} : {{item.value}}
</div>
<div *ngFor="let item of object | keyvalue: keyDescOrder">
{{item.key}} : {{item.value}}
</div>
See this stackblitz for a demo.
Supplying a constant or null
instead of a valid comparer function preserves the entry order of the object properties, like originalOrder
does, but it causes an exception (see this stackblitz):
<!-- The following syntaxes preserve the original property order -->
<div *ngFor="let item of object | keyvalue: 0">
<div *ngFor="let item of object | keyvalue: 374">
<div *ngFor="let item of object | keyvalue: null">
<!-- but they cause an exception (visible in the console) -->
ERROR TypeError: The comparison function must be either a function or undefined
Moreover, using that syntax twice in the template does not display the items at all. Therefore, I would not recommend it. Please note that supplying undefined
as the comparer function does not cause any exception but does not change the default behavior: the items are sorted by key
value.
<div *ngFor="let item of object | keyvalue: 0">
{{item.key}} : {{item.value}}
</div>
directly write and you will get the data in sameorder as it is in the json
keyvalue: 0
Yes, by default the keyvalue pair sorting data in ascending order.
To keep it unsorted modify as:
keyvalue: 0
Final code:
<div *ngFor="let item of object | keyvalue:0">
{{item.key}}:{{item.value}}
</div>
But for angular 7 or above, you need to put an empty function to keep data unsorted.
<div *ngFor="let item of object | keyvalue: unsorted">
{{item.key}}:{{item.value}}
</div>
In your .ts
file just put this empty function.
unsorted() { }
Hope it's helpful.