How to use Virtual Scrollbar in Angular Mat Select

Dealing with large datasets in angular material multi select is tough especially when you do not have Virtual Scrollbar integrated. I will explain steps on how to use Virtual Scollbar in Angular Mat Multi Select.

Here is a quick info of what is Virtual Scrollbar:- It is a way to improve the performance of scrollable items like Dropdown, Table etc. Suppose you have to display more than 10k records in a dropdown or a table, then without using Virtual Scrollbar, it becomes performance issue to deal with. More info.

We will be integrating Virtual Scroll in a Mat Multi Select control.

Step 1:

Use a Mat Multi Select control. Check below code for reference:

Here you will notice two things:

  1. cdk-virtual-scroll-viewport
  2. *cdkVirtualFor

Those are the key tag and directive to work with Virtual Scroll bar in Angular.

Step 2:

Make required changes in Typescript code. Check below code for reference:

Just for reference, here is a working code example running on Stackblitz.


Write me up if there is any error while integrating it.

That’s it!!

5 thoughts on “How to use Virtual Scrollbar in Angular Mat Select

    1. Sadly, they can’t give you an explanation of this code because they didn’t write it. They stole this from a StackOverflow post from 2020 and added a useless introduction to it.

      1. You are commenting on a comment that is 1 year old. By the way this post was for my personal use to remind me this code if ever I stuck implementing a virtual scroll bar. You can check my other articles on Angular. If you don’t find any value, you can leave the blog.

Leave a Reply

Your email address will not be published. Required fields are marked *