Angular CDK Overlay: Scroll strategies
In the Angular CDK there are a lot of cool, exciting, and helpful features.
🚀 Want to master Angular Signal Forms?
I just released a full course where we build a real Signal Form step-by-step covering validation, async validation, dynamic fields, custom controls, and submission patterns.
👉 Enroll here:
https://www.udemy.com/course/angular-...
And, the Overlay Module is one of the most powerful. It’s used to create things like dialogs, tooltips, menus, custom dropdowns and more.
I’ve already created a couple of videos on the Angular CDK Overlay Module, one where I cover the basics of setting them up ( • Angular CDK Overlay: Learn the Basics ), and another where I demonstrate different ways that they can be positioned within the viewport ( • Angular CDK Overlay: Learn the Basics ). If you’re unfamiliar with these concepts and haven’t watched those videos, you should do that before watching this one because we will build off the examples that we created in them.
Here in this video, we’ll be focused on how we want an overlay to react when scrolling the container it’s positioned within. The overlay module provides us with four scroll strategies out-of-the-box: reposition, block, close, and noop. In this video we’ll take a close look at each one. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos: • The Angular CDK Overlay
------------------------------------------------------------------------------
🔗 Demo Link:
https://stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:02 – Why we need to handle scrolling when using the CDK Connected Overlay
2:03 – Using the CDK Overlay Reposition Scroll Strategy
4:05 – Using the CDK Overlay Block Scroll Strategy
4:45 – Using the CDK Overlay Close Scroll Strategy
5:05 – Using the CDK Overlay Noop Scroll Strategy
5:34 – How to handle Overlay scroll strategies with many scrolling containers using the cdkScrollable directive
------------------------------------------------------------------------------
#angular #angulartutorial #cdk