Using trackBy for lists with *ngFor

Lists are an essential part of most of the apps we build today. If you’re building an Angular app, there’s a great chance you will use the *ngFor directive at some point for rendering lists. The *ngFor directive allows us to loop over arrays or objects generating HTML for each item. However, if we are rendering large lists, using *ngFor without caution may cause performance issues, especially when the source for *ngFor is changed completely (the entire array is replaced). In this recipe, we’ll learn how we can improve the performance of lists using the *ngFor directive with the trackBy function. Let’s get started.

Getting ready

The app that we are going to work with resides in start/apps/chapter12/ng-for-trackby inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project...