Skip to content
angular challenges logo Angular Challenges

๐ŸŸข NgFor Optimization

Challenge #36

Created by Thomas Laforge

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.

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.

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • tomalaforge
  • LMFinney