Sometimes engineers have to display thousands of items at once on a table or in a list. Adding these too many items to DOM can cause problems forcing the application to slow down.
But fortunately there is a process called Virtual Scroll for displaying things without delaying the app down.
Let's check out all the options before logging into Virtual Scroll.
There are 3 ways to handle this:
Pagination: Paint your list with paint and show things like computers are done but you can't get a summary of your listing at the same time and you have to press back and forth between pages. (e.g. Google Search Results)
Infinite Scroll: Initially it only loads a few items and ends up adding more items to the list as you scroll, providing a complete summary of the list but as more items continue to add, the list will eventually drop as the number of nodes in DOM increases and thus the app will start slowing down .
Virtual Scroll: Only show a small subset of data in the viewfront and continue to change records as the user scrolls. Maintaining the number of DOM items permanently increases app performance.
NOTE: Virtual Scroll is simply a strategy that can be used within an endless list or volume. It has nothing to do with the way you use it, be it a clear list or an endless document or thus any other strategy you can choose.
Installation
Make sure you use the Angular 7 application
Type the following command to add Angular CDK version 7.0
NPM
npm to install @ angular / cdk @ 7.0.0
Angular CLI
ng add @ angular / cdk @ 7.0.0
Setting
