How to Render Large Tree Data Structures in Angular

Using virtual scrolling

Photo by niko photos on Unsplash

Displaying long lists of items in a client application requires strict attention, as it’s well-known that the application performance can degrade rapidly while trying to render lists with hundreds or even thousands of items.

This happens since the browser must render the entire page and all the data inside it upfront, before showing it to the end-user, and as such, rendering thousands of items in a list would lead to great frustration.

Fortunately, we can use the virtual scrolling technique to address this problem.

From a high-level perspective, virtual scrolling allows the client to render just a small portion of the entire list at a time, for example, ten items, and as the user scrolls up or down that list, only the items that should be shown on the screen, regarding the scroll position, are rendered.

In this way, besides the shorter load time for the application, scrolling through the list is quite fast as well.

I will dive deeper into this technique by solving a problem I ran into recently, while trying to visualize a tree data structure in an Angular application.

The following image clearly depicts the desired end-result: a tree data structure, which could…