How to use Virtual Scrolling using Angular 7 CDK

Sometimes developers have to display thousands of elements at a time in a table or list. Adding these many number of items in the DOM can cause problems and forces the application to slow down.https://medium.com/media/18214d8333adbb5668f31791a3202b60/hrefBut fortunately there is a technique called Virtual Scroll to display the items without slowing the app down.Let's evaluate all the options before getting into Virtual Scroll.There are 3 ways to handle this:Pagination: Paginate your list and show items as chunks it's performant but you can't get the whole snapshot of your list at once and you also have to click back and forth between pages. (e.g. Google Search Results)Infinite Scroll: Initially loads only few items and keep appending more items to the list as you scroll, it gives the complete snapshot of the list but as more and more items keep adding, list is going to slow down eventually as the number of nodes in the DOM are increasing and thus application will start slowing down.Virtual Scroll: Display only small subset of the data that is in the viewport and keep changing the records as the user scrolls.

✔ Read More...

I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

virtual-scroll,angular,scrollingmodule,angular-cdk,angular-7