Angular CDK Overlay Tutorial: How to Use Scroll Strategies

In the Angular CDK there are a lot of cool, exciting, and helpful features. 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 Tu... ), and another where I demonstrate different ways that they can be positioned within the viewport ( • Angular CDK Overlay Tu... ). 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:
1.) Learn the Basics ( • Angular CDK Overlay Tu... )
2.) How Positioning Works ( • Angular CDK Overlay Tu... )
3.) Adding Animations ( • Angular CDK Overlay Tu... )
4.) Adding Accessibility ( • Angular CDK Overlay Tu... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Link:
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 #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #cdk

[@alexsandroagustini714]

Hey there, great video, I'm trying to bind the scrollStrategy to my ng-template for each item inside a list that is rendered with ngFor, just like your example, it's just not separated between components. I'm having this problem where, every time I try to open the second overlay,angular throws an error "Scroll strategy has already been attached", and I'm not really following on what's happening

[@briantreese]

I'd love to try and help. Can you reproduce this in a simple StackBlitz example so I can look at your code? It's pretty hard to try to help when I don't have something to look at. Thanks!