Angular Material Virtual Scroll

Angular Material 6.2.0 is out and it’s worth a mention for the codename alone: bamboo-shampoo! 6.2.0 is mainly a bugfix release with one marquee feature: Angular Material Virtual Scroll has been added to the experimental CDK.

Angular Material 6.2.0

What is Angular Material Virtual Scroll?

Virtual Scroll is best explained with an example: Your twitter feed. If you tried to display all this data the page would take forever to load. So how do you render the list in an efficient way?

There are several approaches: paging, adding items to list as you scroll and virtual scrolling.

Virtual scrolling displays a small subset of records. Just enough to fill the viewport. As the user scrolls the list changes.

Keeping the number of DOM elements constant makes this very efficient but requires a lot of calculations.

Adding virtual scroll to the CDK hides all the complexity and lets you write fast, efficient, attractive UI controls with the minimum amount of effort.

Angular Material Virtual Scroll

Netanel Basal has written an excellent article called A Taste of Angular Material Virtual Scroll. It’s well worth a read if you want to know more and see a demo.


Upgrade to Angular by Darryl Brown is a daily bite-size newsletter containing Angular newsanalysis and advice.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.