Angular Performance Optimization Using trackBy Function

The problem with ngFor and how to solve it

In this tutorial, we are going to see an optimization technique in Angular. The section we are going to focus on is an array of data. We always use the ngFor to iterate the array of data in Angular. The ngFor loop through the array and will display the individual data as output.

We are not worried about how the ngFor works?. Why because most of the time we used only fewer data in the array. A few data in the array do not create a performance problem in Angular if we use the ngFor to iterate the data. But if you use more data such as 1k or more rows then definitely you will feel the slowness in rendering the output.

First, we will learn, how the ngFor works?. Then we will learn, how to solve the slowness(performance issue) using the trackBy function.

How ngFor Works?:

Assume we have the below data.

HTML code to render the array values.