Angular CDK Overlay Tutorial: How Positioning Works

The Angular CDK Overlay is a handy, powerful, and fairly complex feature that can be used to quickly create things like modals and pop-ups. In my previous video about the CDK Overlay ( • Angular CDK Overlay Tu... ), I covered the basics needed to create both a modal using the global position strategy and a pop-up using the flexible connected to position strategy. I’d suggest that if you’re unfamiliar with the Overlay module at all, you go check out that video first because the demos in this video will build off the examples we built, and concepts that we learned that video.
In this video we learn about different ways to control how a pop-up gets positioned when using a connected overlay because there’s a lot to it and it’s all pretty cool. We’ll learn how we can specify a desired position and then provide fallbacks when it can’t fit. We’ll learn how to force a pop-up into view when it won’t correctly fit within any of the provided positions. And lastly, we’ll look at how to handle a pop-up when it’s too large to display within the viewport. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos:
1.) Learn the Basics ( • Angular CDK Overlay Tu... )
2.) How to Use Scroll Strategies ( • 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:08 - Understanding how the CDK Connected Overlay positioning works
1:54 - Understanding the CDK Connected Position Pair and how it's used to create overlay positions
2:15 - The Connected Position Pair x-axis values
2:35 - The Connected Position Pair y-axis values
3:28 - How fallback positions work with the CDK Connected Overlay
3:58 - The cdkConnectedOverlay directive default positions
5:02 - Providing a custom position to the cdkConnectedOverlay directive using the cdkConnectedOverlayPositions input
6:04 - Providing fallback positions when needed
7:12 - How to add an x and y offset to an overlay when defining a custom position
8:15 - How to push an overlay into the view when it doesn't fit using the cdkConnectedOverlayPush input
8:44 - Ensure space between the overlay and the viewport with the cdkConnectedOverlayViewportMargin input
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #cdk

[@tobi-osimosu]

Thank you!

[@alehdrazdou4843]

Simply the best explanation I've seen on the internet. Thanks a lot!

[@briantreese]

Glad it was helpful!

[@HouseJunkieHUN]

Very nice quality video and good explanation! Keep it up!

[@briantreese]

Glad it was helpful!

[@ihssanesoumir5659]

Thank you for the video , it is so helpful .I have an issue in my code , I can't seem to figure out the solution.And i will appreciate any help . When I put in my page another input field or an image (anything) the overplay doesn't appear on the top of them , but instead it gets detached from the origin input field and becomes under the bottom of whatever components in the page .I will appreciate any help on this matter . this is my code







{{ option }}

[@briantreese]

Have you included @import '@angular/cdk/overlay-prebuilt.css'; in your root stylesheet?

[@ihssanesoumir5659]

@@briantreese Thank you so much ! Including it in the right file has solved the issue for me , again thank you for your help .