Create an Infinite Scrolling list with Angular CDK Virtual Scroll and RxJS

#Angular #Material #InfiniteScroll #CDK

In this video, I walk you through building a blazing fast infinite scrolling list using the Angular CDK Virtual Scroller package and a bit of RxJS magic!

If you're more of a reader, check out the same in my blog.

The complete code for the app shown here can be found at:

For more such videos, follow me on:

Cheers :)

[Robcuisimplu]

Very helpful. It is something that I needed for one of my projects. Thank you

[larryamisola]

Very useful video. Please Continue providing angular material capabilities. Thanks for sharing.

[cristiandegracianuero]

Wow, pretty nice video, It was so clear!

[amolgode]

Hii sir.. you're tutorials are so helpful..

Can you make video on
Sign in and login page

[ivanconsalter]

amazing tutorial, congratulations I have a primeng p-dropdown, backend is paginated and comes 50 items per page, can I make the scroll effect to change pages and bring other items?

[shubhambahre]

How to stop this once all the items have finished loading?

Let's say I am doing infinite scroll from 5000 items and loading 20 at a time. If I have scrolled enough to load all 5000, how to stop the infinite scroll?

[venuyadavboini]

I have used this virtual scroll in my project it is working fine but when ever i am trying scroll to the down items are getting loaded slowly and sometimes it is blank for a while(1 to 2 sec) how can I avoid this

[TheStusaw]

For some reason I couldn't get this working without running manual change detection? Thanks for the tutorial though.

[ytfjvrs]

can you please tell me why the list is not showing in ordered manner.

[zackz]

Can I make a virtual scroll if child elements are not all the same height?

[koteswarnukani-psdj]

Awesome, keep post great stuff like this @zoaib khan, can you pls make this work along with drag and drop, so than ist greatfull