10 Angular CDK Virtual Scroll Best Practices

Angular CDK Virtual Scroll is a powerful tool for building large lists and tabular data. It provides a way to optimize the performance of an application by only rendering the items that are visible in the viewport.

In this article, we will discuss 10 best practices for using Angular CDK Virtual Scroll. We will look at how to use it to create efficient, performant, and user-friendly lists and tables. We will also discuss how to use it in combination with other Angular features, such as lazy loading and infinite scrolling.

1. Pre-load a few items before the user scrolls

Pre-loading items before the user scrolls helps to ensure a smooth scrolling experience. By pre-loading a few items, the browser can render them quickly and efficiently when the user begins to scroll. This reduces the amount of time it takes for the page to respond to the user’s input, resulting in a smoother, more responsive experience.

The Angular CDK Virtual Scroll also provides an API that allows developers to specify how many items should be pre-loaded. This is done by setting the “preloadSize” property on the virtual scroll component. The value of this property determines how many items will be rendered ahead of the current viewport. For example, if the preloadSize is set to 10, then 10 additional items will be rendered before the user starts scrolling.

2. Keep track of scroll position and restore it after data changes

When using the Angular CDK Virtual Scroll, it is important to keep track of scroll position because when data changes, the viewport will reset back to the top. This can be a jarring experience for users if they are used to scrolling through long lists and suddenly find themselves at the beginning after making a change.

Keeping track of scroll position allows developers to restore the user’s previous scroll position after data changes. This ensures that the user does not lose their place in the list and provides a more seamless experience.

To do this, developers should use the ViewportRuler service provided by the Angular CDK. The ViewportRuler service provides methods such as getViewportScrollPosition() which returns an object containing the current scroll position. Developers can then store this information and use setViewportScrollPosition() to restore the scroll position after data changes.

3. Avoid using *ngFor inside cdkVirtualFor

The *ngFor directive is used to iterate over a collection of data and generate DOM elements for each item in the collection. However, when using cdkVirtualFor, it’s important to note that this directive does not create any DOM elements until they are scrolled into view. This means that if you use *ngFor inside cdkVirtualFor, all of the items in your collection will be rendered at once, which can cause performance issues.

To avoid this issue, you should instead use the cdk-virtual-scroll-viewport component with the cdkVirtualFor directive. The cdk-virtual-scroll-viewport component renders only the items that are visible on the screen, and as the user scrolls down the list, more items are rendered. This ensures that only the necessary items are being rendered, resulting in improved performance.

It’s also important to note that the cdkVirtualFor directive requires an itemSize input parameter, which specifies the size of each item in the list. This allows the virtual scroll viewport to accurately calculate how many items need to be rendered based on the current scroll position. Without this parameter, the virtual scroll viewport would not know how much space to allocate for each item, resulting in incorrect rendering.

4. Set the itemSize property to improve performance

The itemSize property is used to define the size of each item in the virtual scroll list. By setting this property, Angular CDK Virtual Scroll can accurately calculate how many items should be rendered at any given time and only render those items instead of rendering all items in the list. This helps improve performance by reducing the amount of DOM elements that need to be created and managed.

To set the itemSize property, you must provide a function that returns the height of an individual item in the list. The function will be called for every item in the list and should return the exact same value for each item. Once the itemSize property has been set, Angular CDK Virtual Scroll will use it to determine which items should be rendered and when.

5. Use the cdkDropList directive for drag and drop functionality

The cdkDropList directive provides a powerful way to implement drag and drop functionality in an Angular application. It allows users to easily move items from one list to another, or even within the same list. This is especially useful when using virtual scrolling, as it allows for efficient reordering of large lists without having to reload the entire page.

Using the cdkDropList directive also makes it easier to keep track of changes made to the list. When an item is moved, the directive will emit an event that can be used to update the underlying data model. This ensures that any changes are reflected in the UI immediately, making it easy to keep the list up-to-date.

6. Make sure all elements in the list have the same height

When using virtual scrolling, the browser only renders elements that are visible in the viewport. This means that if all elements have different heights, the browser will need to recalculate the size of the list and render new elements as the user scrolls. Having consistent element heights eliminates this extra work, allowing for smoother scrolling performance.

To ensure all elements have the same height, developers can use CSS flexbox or grid layout. Flexbox is a one-dimensional layout system that allows elements to stretch and shrink according to their content. Grid layout is two-dimensional, meaning it can be used to create complex layouts with rows and columns. Both of these methods allow developers to set a fixed height for each element in the list.

7. Wrap long text with ellipsis or use a tooltip

Ellipsis is a great way to shorten long text and make it easier to read. It can be used to indicate that there is more content available, without taking up too much space on the page. When using ellipsis with Angular CDK Virtual Scroll, it allows users to quickly scan through the list of items without having to scroll down or click into each item to see what’s inside. This makes it easier for them to find the information they need.

Tooltips are also an effective way to provide additional context when using Angular CDK Virtual Scroll. Tooltips allow users to hover over an item in the list and get more detailed information about it without having to leave the current page. This helps keep users focused on their task and reduces the amount of time spent scrolling through the list. Additionally, tooltips can be used to display longer descriptions than would fit within the limited space of an ellipsis.

8. Don’t forget to unsubscribe from observables when done

When using observables, it is important to remember that they are not automatically destroyed when the component or directive is destroyed. This means that if you do not unsubscribe from them, they will continue to run in the background and can cause memory leaks. Unsubscribing from an observable ensures that all resources associated with it are released and no longer used by the application.

To ensure that your application does not suffer from memory leaks due to forgotten subscriptions, Angular CDK Virtual Scroll provides a utility function called takeUntilDestroyed(). This function takes an observable as its argument and returns a new observable which will be automatically unsubscribed when the component or directive is destroyed. This makes it easy to make sure that all of your subscriptions are properly cleaned up when done.

9. Implement caching to reduce the number of DOM updates

Caching helps to reduce the number of DOM updates by storing data in memory and reusing it when needed. This means that instead of having to query the DOM for each update, the cached data can be used instead. This reduces the amount of time spent querying the DOM and improves performance.

When using Angular CDK Virtual Scroll, caching is especially important because it allows the application to quickly render large lists of items without having to wait for all the DOM updates to complete. By caching the list items, the application can quickly access them and display them on the screen without having to wait for the entire list to be rendered.

Additionally, caching also helps to improve the user experience by reducing the amount of time it takes for the page to load. Since the cached data is already stored in memory, the browser does not have to spend time loading the same data over again. This makes the page load faster and provides a better user experience.

10. Utilize the onRendered event to perform additional logic

The onRendered event is triggered when the virtual scroll viewport renders a new set of items. This allows developers to perform additional logic, such as updating the UI or making API calls for more data.

Using this event can help improve performance by reducing the amount of work that needs to be done in the main thread. For example, if an application has a large list of items and each item requires some sort of processing before it is rendered, using the onRendered event will allow the processing to happen outside of the main thread, which will reduce the load on the main thread and make the application run faster.

Additionally, utilizing the onRendered event can also help with memory management. By performing additional logic outside of the main thread, the application can avoid loading unnecessary data into memory, which can help prevent memory leaks and other issues.