Learn how you can handle dynamic items size for Angular CDK virtual scroll by providing your own VirtualScrollStrategy.

Angular CDK has virtual scroll toolkit starting from version 7.

It works great straight out of the box when your items all have the same size. We just tell cdk-virtual-scroll-viewport size of our item and that’s it. We can then tell it to scroll to an item, do that smoothly or subscribe to current item index when user scrolls it. What do we do though, if our item size can change? This is the case for custom virtual scroll strategy. We can create it to teach viewport how to work with our items.

In my case I needed to create a mobile view for calendar. You should be able to scroll months seamlessly. In the meantime, each month can have different height due to different number of weeks it takes. Let’s try to figure out what virtual scroll strategy is and write our own.

#angular #web-development #typescript #components