How to use Angular Virtual Scroll with Ionic [v6]

angular-virtual-scroll-ionic

Although not yet gone, Ionic v6 deprecates the virtual scroll component so instead of using the Ionic implementation, we now need to use a different component now.

Virtual scroll brings performance improvements when you have a huge amount of data inside a list. By only rendering the visible items plus a buffer at the top and bottom, your app keeps a small memory footprint and cells will be reused when the user scrolls.

angular-virtual-scroll-ionic

Lucky for us, there’s already an Angular virtual scroll component we can use instead of the soon to be removed ion-virtual-scroll!

If you are looking for a different solution that supports pagination, check out the Quick Win on improving your list performance as well.

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN



Starting our virtual scroll Ionic app

To get started we bring up a blank new Ionic app and install the Angular Component Dev Kit (CDK):

The Angular CDK comes with many cool components, but today we are only interested in the virtual scroll, so we are importing it in the src/app/home/home.module.ts which is the module of our only page:

That’s all we need for the basic integration and import of the new component.

Adding the virtual scroll component

Now we can use the component in our page, but before we should create an array of some items. Well maybe some and a bit more.

Therefore, open the src/app/home/home.page.ts and create an array like this:

Don’t mind the other viewchild imports for now – we gonna see how to use them later.

Now we can create the virtual scroll area and for this, we surround everything that should be inside that virtual scroll with the cdk-virtual-scroll-viewport component.

This is basically like the canvas, and we can now scroll everything we want inside of it. The only thing we need to do is use the *cdkVirtualFor directive instead of the regular Angular loop that we would use!
Besides that, you can have an item, cards, whatever you want in that list.

Let’s see how the basic structure could look like in our src/app/home/home.page.html:

Our virtual scroll works the best when we specify an itemSize, which in our case is the height of one Ionic item. This makes it easy for the component to calculate how many items should be preloaded and created.

The minBufferPx and maxBufferPx describe how many items should be kept in memory at a time – play around with those values to have a smooth and performant result in your app.

Right now you wouldn’t see anything inside your view as we haven’t defined the size for our virtual viewport, so go ahead and change the src/app/home/home.page.scss to:

If you don’t have any other elements in your page, you can normally use 100% of the height but since we also added a little row at the top, we should calculate a different value for the height in this case.

Besides that I added a class for odd elements, but that’s only some visual sugar.

Scrolling virtual items from code

At this point your virtual scroll should work just fine already, but from questions in the past I know that scrolling to specific items has been a problem.

So let’s tackel that right here as well: We want to jump to a certain index in our list, and becuase that item might not even exist in our DOM when we want to jump, we need to perform that action on the viewchild of our CdkVirtualScrollViewport!

Let’s add some code to our src/app/home/home.page.ts which calls the scrollToIndex() but on that viewchild:

With this little trick we are now able to jump to virtual items, and also perform all the other actions listed inside the virtual scroll API!

Conclusion

While it’s sad to see a deprecated Ionic component, the replacement is by no means worse. In fact, this component was made for Angular and is still under development so in case something isn’t working yet, you can hope to see it in the future (plus more performance gains)!

As a comparison to virtual scroll you can also check out the implementation of infinite scroll to improve your lists performance.

You can also find a video version of this Quick Win below.