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. We know that *ngFor allows us to loop over arrays or objects generating HTML for each item. However, for large lists, using it may cause performance issues, especially when the source for *ngFor is changed completely. 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 project for this recipe resides in Chapter12/start_here/using-ngfor-trackb:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Run the ng serve -o command to start the Angular app and serve it on the browser. You should see the app, as follows:

Figure 12.16 – App using-ngfor...