🟢 NgFor Optimization

Information

In this application, we have a list of individuals that we can add, delete or update. If you open the developer Chrome panel by pressing F12, go to the Elements tab, and expand the element to see the list, you will notice that each time you add, delete or update a list item, all the DOM elements are destroyed and initialized again. (See video below).

We can also use the Angular DevTool to profile our application and understand what is happening inside our application. I will show you how to do it inside the following video.

Note

If you don’t know how to use it, read the performance introduction page first and come back after.

If you need more information about NgFor, I invite you to read the documentation first.

Statement

The goal of this challenge is to understand what is causing this DOM refresh and to solve it.