🟠 Optimize Big List

Information

In this application, we will render a list of 100,000 individuals by clicking on the loadList button. If you open the Chrome developer panel by pressing F12, go to the Source tab, and expand the element to see the list, you will notice that all 100,000 elements are rendered in the DOM, even though we can only see about 20 elements in the viewport. This process takes a lot of time, which is why the application is very slow at displaying the list.

We can 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.

Statement

The goal of this challenge is to implement a better alternative to display big list of items.

Hints:

Hint 1

If you’re unsure where to begin, I recommend reading the Angular CDK virtualization documentation.