Angular keyvalue Sorting & Variation of *ngFor directive

Those who are not familiar with the Angular framework, I recommend you to learn from its official website and those who know (even basics) can go ahead.

In this article, I am going to describe *ngFor directive (predefined by Angular) which lets you loop through data on HTML.

Now talking about *ngFor loop, When you need to iterate over a collection in Angular 2+ versions, you will probably use the *ngFor directive that will instantiate a template once per item from the collection. for ex:

This is the most basic *ngFor loop we use to iterate on the array. But what if we have to iterate over an object?

Normally, what we can do is to create a custom pipe by which we can iterate over an array of objects (͡❛ ͜ʖ ͡❛)✌, or we have to convert an object into an array of arrays and then we can iterate normally. Isn’t it cockeyed? 🥴

No worry! Angular 6.1 introduces keyvalue pipe to iterate over an object.🤩

Suppose, you have a component in which you have an object like this:

So, to iterate over this object on angular is very easy, with the use of keyvalue pipe.

1: Object declaration, 2: Iteration on HTML, 3: Its output.

Yeah, It seems awesome, It’s been difficult to iterate over objects without this pipe, But have you noticed something different in the above output.🤔 Oops!!!

The object that you declared in app.component.ts is in different order and the one shows in output screen is in different order. Yes it is, But why?

According to the Angular documentation, the keyvalue pipe sorts the items by key order by default. You can provide a compare 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.

Angular KeyValue Pipe Default sorting

As mentioned above keyvalue pipe sorts the converted array based upon Unicode point values of keys

1. If the keys are numbers they are sorted by ascending order.
2. If the keys are strings they are sorted by alphabetical order.
3. If the keys are mixed i.e., one key is a string and another key is number then both are converted to strings, first sorted by numbers in ascending order and then sorted by strings in alphabetical order.
4. If the key is undefined or null they are displayed at last.

I’ll show you the different ways of ordering using keyvalue pipe with *ngFor.

We have seen the first way of ordering the objects using keyvalue.

Now in a second way, If you wanna print the objects as we are getting from API or anywhere and we don’t want to sort, then we can either pass keyvalue: 1 or keyvalue: 0 that I am passing using the reutrnZero function to stop sorting.

Just create a function in app.component.tswhich will either return 0 or return 1, because if we directly write 1 or 0 as keyvalue argument it will throw an error of Error: The comparison function must be either a function or undefined

In the above example, I have passed a function named returnZero.

And if you want to order the object by its value, you can create a function and pass it in keyvalue pipe, you can see the example I have created on stackblitz. 🔥

## Now let’s talk something about *ngFor.

Surely you noticed the asterisk (*) prefix to the directive name and wondered why it is necessary and what it does.

ngFor can only be applied to a <template>. *ngFor is the short form that can be applied to any element and the element is created implicitly behind the scene.

Internally, Angular translates the *ngFor attribute into a <ng-template> element, wrapped around the host element, See below example:

<div *ngFor=”let vehicle of vehicles;”> {{vehicle.key}} </div>

To:

<ng-template ngFor let-vehicle [ngForOf]=”vehicles”> {{vehicle.key}}

</ng-template>

There are some hidden or rarely known features of *ngFor are:

1. You can find out the even or odd number of iteration, it will return true if the iteration is even and false for odd iteration.

2. We can also find out the first and last element of the loop, just like even/odd as mentioned above. Here on the first iteration, it will return true for the first variable and false of the last variable, and on the last iteration, it will return true for last and false for the first variable.

Thank you for reading! Let me know in a comment if you felt like this did help in gaining some knowledge. Any feedback is much appreciated.