Header add


In this article we discuss Angular ngFor trackBy. Before starting this article please go through the link Angular ngFor Directive. The ngFor trackBy is used to improve the performance of an angular application. In this article we will cover below points.
  • Why do we need the Angular ngFor trackBy ? 
  • How to get the index of an item in a collection
  • Identifying the first and the last elements in a collection
  • Identifying even and odd elements in a collection


➤ Why do we need the Angular ngFor trackBy ? 

The use of trackBy is to improve the performance of the angular application. It is usually not needed by default but needed only when your application running into performance issues. The Angular ngFor directive may perform poorly with the large collections.  A small change to the collection such as adding a new item or removing an existing item from the collection may trigger a cascade of DOM manipulations.

Suppose, we have some data coming from some API and we are storing these data into some kind of collection like an array and then we need to update these data over the web-page using ngFor directive. By default, what angular framework will do is, it will remove all the DOM elements that are associated with the data and will create them again in the DOM tree even if the same data is coming. That means a lot of DOM Manipulation will happen in the background if a large amount of data coming from the API again and again.

➤ Example to understand ngFor trackBy

The constructor() initializes the customers property with 3 customers objects. getCustomers() method returns another list of 5 customer objects (The 3 existing customers plus a new customer object with 5 customers)

➤ Modify app.component.html file

Modify the HTML file to add the Customers into list that are use in constructor of the component.
Then we added a button that call the  getCustomers() method when it is clicked.


 ➥ At the moment we are not using trackBy with ngFor directive

When the page initially loads we see the 3 customers. When we click "Get New Customers" button we see the fifth customers as well.It looks like it just added the additional row for the fifth customers. That's not true, it effectively teared down all the <tr> and <td> elements of all the customers and recreated them.

Angular ngFor trackBy
Fig-1

Now you may think that it just added the additional rows for the 4th and 5th customers but that’s not true. It internally destroyed all the <tr> and <td> elements of all the customers and then recreated them. To confirm this launch the browser developer tools by pressing the F12 key. Then click on the “Elements” tab and expand the <table> and then <tbody> elements.

At this point click on the "Get New Customers" button and you will notice that all the <tr> elements are briefly highlighted indicating that they are destroyed and recreated as shown in the below image.

Fig-2

How to solve the above problem ?

In order to solve the above performance issue problem, the angular framework provides one function called trackBy which will help us to track the items which have been added or removed. The trackBy function will take two arguments, first is the index and the second one is the current item and it will return one unique identifier as return a value using which we can track that item. In our example, we are going to track by Customer ID as the this id is unique for each customer.

In order to use trackBy, add the following method in the app.component.ts file.

trackByCustomerID(index: number, student: any): string {
       return customer.ID;
}

Then do the following changes in the app.component.html file:

<tr *ngFor=’let student of students; trackBy:trackByCustomerID’>

Here we are using the trackBy along with ngFor directive. At this point, run the application and then launch the browser developer tools by pressing the F12 key. When you click on the "Get New Customers" button for the first time, then you can notice that only the 4th and 5th rows of the customers are highlighted indicating that only those <tr> elements are added.

On the subsequent clicks, nothing is highlighted meaning none of the <tr> elements are destroyed or added as the customer's collection has not changed. Each and every time when you click on the "Get New Customers" button you get different object references, but as the Angular is now tracking the customer objects using the Customer Id instead of object references, as a result, the respective DOM elements are not affected.

 ➥ How to get the index of an item in a collection 

 We are using the index property of the ngFor directive to store the index in a template input variable "i". The variable is then used in the <td> element where we want to display the index. We used the let keyword to create the template input variable "i". The index of an element is extremely useful when creating the HTML elements dynamically.


Fig-3

 ➥ Identifying the first and the last element in a collection

Use the first and last properties of the ngFor directive to find if an element is the first or last element respectively. Modify the app.component.html like below;

The output should like this below;

Fig-4

 ➥ Identifying even and odd element in a collection 

 This is similar to identifying first and last element in a collection. Instead of using first and last properties, use even and odd properties.

The output should like below;

Fig-5




 Summary
In this tutorial we discussed Angular ngFor trackBy. If have any question related to this topic then give your feedback.

You May Also Like...

Tags

Post a Comment

Post a Comment

Previous Post Next Post