Angular CDK Overlay: Learn the Basics

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. 🚀 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-... 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:    • The Angular CDK Overlay   ------------------------------------------------------------------------------ 🔗 Demo Link: https://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 #angulartutorial #cdk