CDK Overlay

The Easiest Way to Add a Modal in Angular

April 03, 2025

Building modals in Angular often requires third-party libraries or complex overlay code, but the Angular CDK Dialog provides a native, lightweight solution that handles positioning, focus management, and backdrop behavior automatically. This tutorial demonstrates how to create modals using the CDK Dialog service, open any component as a modal, customize styling, and add custom behavior without external dependencies. You'll learn the simplest way to add professional modals to your Angular applications.

Accessibility Angular Angular Animations

Angular CDK Overlay: Add Accessibility with ARIA and Focus Management (v19+)

February 02, 2024

Inaccessible modals and pop-ups exclude keyboard users, screen reader users, and violate WCAG guidelines, yet many Angular developers overlook basic accessibility features. The Angular CDK Overlay provides powerful positioning and animation features, but accessibility requires additional work: ARIA roles, focus management, keyboard navigation, and proper focus trapping. This tutorial demonstrates how to make CDK Overlay-based modals fully accessible, ensuring all users can interact with your overlays effectively.

Angular Angular CDK Angular Directives

Angular CDK Overlay Animations: Animate Open and Close Transitions (v19+)

January 26, 2024

Adding smooth open and close animations to Angular CDK Overlays requires Angular's animation framework. CSS transitions alone won't work because overlays are dynamically inserted and removed from the DOM. In this tutorial, you'll learn why :enter/:leave animations fail for overlays, how to use state-based animations instead, coordinate animation completion with overlay detachment, and leverage transform-origin for more natural animations. This guide builds on CDK Overlay basics, positioning, and scroll strategies. All examples work with Angular v19+.

Accessibility Angular Angular CDK

Angular CDK Overlay Scroll Strategies: Reposition, Block, Close, or Noop (v19+)

January 19, 2024

Choosing the right scroll strategy for Angular CDK Overlays is crucial. Should your popup reposition as users scroll, block scrolling entirely, close automatically, or do nothing? Each strategy serves different use cases, and picking the wrong one creates frustrating user experiences. In this guide, you'll learn all four built-in scroll strategies (Reposition, Block, Close, and Noop), when to use each one, and how to handle custom scrolling containers with the cdkScrollable directive. This article builds on CDK Overlay basics and positioning concepts. All examples work with Angular v19+.

Angular Angular CDK Angular Styles

Angular CDK Overlay Positioning: Custom Positions, Fallbacks, and Viewport Handling (v19+)

January 12, 2024

Mastering Angular CDK Overlay positioning is essential for building professional dropdowns, tooltips, and popovers, but the connected overlay's positioning system can be overwhelming at first. In this guide, you'll learn how to create custom position strategies with fallback options, handle viewport edge cases, and ensure your overlays always display correctly regardless of screen size or scroll position. This article builds on the CDK Overlay basics and shows production-ready techniques for controlling overlay placement in Angular v19+. If you've ever struggled with overlays getting cut off or appearing in the wrong location, this guide will give you the tools to fix it.

Angular Angular CDK Angular Forms

Angular CDK Overlay: Build Floating Panels the Right Way (v19+)

January 05, 2024

Angular's CDK Overlay is the foundation behind dialogs, tooltips, dropdowns, and floating panels, but most developers only interact with it indirectly through Angular Material. In this guide, you'll learn how to use the Angular CDK Overlay directly to create fully custom floating UI elements with precise positioning, layering, and lifecycle control. This article is updated for Angular v19+ and shows the modern, production-ready way to create overlays without relying on deprecated patterns. If you've ever needed a custom popup, context menu, or floating panel, this is the missing piece.