Angular Material Multi Select All with Large Dataset

If you’re working with Angular Material and you have to integrate a Multi Select dropdown with a pretty large dataset with almost 5000 or more records and you have to provide Select All option in there then you would definitely need to use the Virtual Scrollbar otherwise you would go through a huge performance issue while selecting all.

Select All option with large dataset in Angular Material causes a huge performance issue and sometimes Maximum call Stack Size exceeded error. I am here with a solution to this problem. Just follow the steps:-

Step 1:

Integrate Virtual Scrollbar into Material Mat Select. Use the below code for your reference:-

Step 2:

Make required Typescript codes to run the page. Use below code for your reference:-

That’s it!!!

I have here a working example ready at Stackblitz. You can just open this link and use codes.

Write me up for any change or if its not working as per your expectation!

Thank you!

2 thoughts on “Angular Material Multi Select All with Large Dataset

Leave a Reply

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