Angular CDK Overlay Tutorial: Learn the Basics

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes this is easy and can be done with some simple CSS. But other times, you may need to actually append markup to the bottom of your document, before the closing body tag, so that it can be placed on top of everything else. Or maybe, depending on scroll position, a pop-up will need to open upward instead of downward.
There’s lot’s of possible scenarios where we may need more than what’s capable within just CSS and that’s where the CDK Overlay Module comes into play. In this video we’ll look at how we can use the Overlay Module to create a global modal that’s placed on top of everything else and centered within the viewport. And to contrast, we’ll create a pop-up connected to a button that will automatically position itself within the viewport based on scroll position. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos:
1.) How Positioning Works ( • 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:21 - Creating a modal with the Angular CDK Overlay Service
1:42 - How to install the Angular CDK
1:49 - How to import the Angular CDK Overlay prebuilt CSS
5:26 - How to customize the Angular Overlay settings with a custom Overlay Config object
6:32 - How to close an Angular Overlay on a backdrop click
7:24 - Creating a pop-up with a connected position Angular Overlay
8:21 - Using the cdkOverlayOrigin and cdkConnectedOverlay directives
10:18 - How to customize the Angular Connected Position Overlay settings with the cdkConnectedOverlay inputs and outputs
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #cdk

[@tobi-osimosu]

Great video! Thank you!

[@laurentiualexandru3475]

You saved me. I struggled a lot with angular material mat-menu and matToolTip as they refused to display correctly next to the parent component. That import in the global styles file did the trick. Thank you!

[@KostasOreopoulos]

Great video. Thank you for your time.

[@Neotrixstdr]

Very good video!

[@je.ro.me_101]

Nice video 👍 Could you do one on CDK layout?

[@briantreese]

I actually have one already here: ua-cam.com/video/aKxFbZG_3go/v-deo.htmlsi=kc6HyTb4r0-JDNpt

[@mansidhakite2518]

how we can change the backdrop color

[@briantreese]

You should just be able to add something like .cdk-overlay-backdrop { background-color: red } to your globally included style sheet.

[@fabianguarascio]

good content, i am using this overlay with portal to create modals with components.
but i am having the issue that when the modal ( the component that renders inside the overlay with the content that i want to show) is higher than the viewport it goes outside the view and i cannot scroll down to see all the content of the modal (if i allow scrollstrategy it scrolls the page but it dosent scrolls the modal).
in the end i use overflow inside the component but that is not the behaivor i want. is there a solution to that ?

[@briantreese]

I think I understand your issue but could you provide a Stackblitz example? Then I can try to take a look.

[@briantreese]

My hunch is that you may be looking for the cdkConnectedOverlayLockPosition input. If you set this to true it will allow it to scroll with the rest of the content I believe.

[@briantreese]

I also have this video that may help as well: ua-cam.com/video/UtptUw0XpcQ/v-deo.html

[@marianvajda785]

Hello! What to do if my overlay is inside a scrollable dialog? So when the dialog gets scrolled the overlay doesnt stay relevant to the button that opened it, is it fixable?

[@briantreese]

There are different ways to handle overlays when scrolling. In your case it sounds like you may want to use the "close" scroll strategy.
Take a look at this video to learn more: ua-cam.com/video/UtptUw0XpcQ/v-deo.html.

[@Sebastian-ih1cl]

Whats bennefits does cdk overlay have thay you dont have with a nativr ?

[@briantreese]

This is a great question! The native dialog is super powerful and the best way to go if it works for you. There are several subtle differences with the CDK Overlay and then there are some pretty big differences too, the biggest of which is the "connected position" concept for creating popups. The control that we have for automatically positioning popups relative to the origin with additional fallback positions is something that is, at least as far as I know, not yet possible with a native dialog.
There are probably too many things to list out here, but you should check out some of the other videos I've created on the Overlay. They may help you to understand the benefits a little more. ua-cam.com/play/PLp-SHngyo0_iun9oglT2boNYebJ1Yv-GT.html

[@TafiVids]

@@briantreese Your videos are insanly well made. Please keep it up :)

[@Sebastian-ih1cl]

@@briantreese Thank you!