{{announcement.body}}
{{announcement.title}}

How To Use TrackBy With *ngFor in Angular 8

DZone 's Guide to

How To Use TrackBy With *ngFor in Angular 8

In this article, we discuss how to use Angular's TrackBy function in combination with *ngFor to increase the performance of our application.

· Web Dev Zone ·
Free Resource

Introduction

In this article, we are going to learn how to use TrackBy in Angular applications.

In every application, to run the application faster, we need to check the performance of our application. Angular provides a method called trackBy, which is used to track our incoming data every time we get a request from an API. 

Suppose we have some data coming from an API request into the collection, and we need to change the data over the web page using the ngFor directive. In this case, Angular will remove all the DOM elements that are associated with the data and will create them again in the DOM tree. That means a lot of DOM manipulations will happen if a large amount of data is coming from the API. 

Prerequisites

  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node JS must be installed.

Step 1

Let's create a new Angular project using the following NPM command:

TypeScript


Step 2

 Now, let's create a new component by using the following command:

TypeScript


Step 3

 Now, open the trackBy-example.component.html file and add the following code in the file:

HTML

 

Here, we are not using the trackBy function yet. 

In the below code, we can check how to apply trackBy with our structural directive, *ngFor:

HTML


Step 4

Now, open the trackBy-example.component.ts file and add the following code in this file:

TypeScript


The trackBy function will take two arguments. The first is the index, and the second is the current item. We can return the unique identifier as a return argument.

TypeScript

  

Step 5

Now, open the product.service.ts file and add the following code:

TypeScript


Now, it's time to run the project by using npm start or ng serve command and check the output. As in the below image, when we click on "New Companies" it will add one new entry in the table. 

Adding new companies
Adding new companies

If we use the normal *ngFor directive without using the trackBy function, the Angular application will remove all the DOM elements and will recreate them again in the DOM tree, even if the same data is coming. This can slow down our application performance if there's a lot of data. 

Application performance
Application performance


But, with the help of trackBy, it will not create a new DOM, as we can see in the below image. Only the new data in the DOM will be added, which will increase the application performance.
 

Only new data added to the DOM

Only new data added to the DOM

Conclusion

In this article, we have seen how to use trackBy with NgFor in an Angular 8 Application.

Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article, and how I could improve it.

Topics:
angular 8, dom, ngfor, performance, trackby, tutorial, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}