🟢 NgFor Optimization
Challenge #36
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 he source tab, and expand the element to see the list, you will notice that each time, you add, delete or update a list item, the entire 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.
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.