Angular CDK

Make Any List Draggable in Minutes

October 09, 2025

Drag-to-reorder functionality improves UX by letting users customize list order, but implementing it requires handling drag events, calculating drop positions, and managing list state. The Angular CDK Drag and Drop module simplifies this with directives that handle all drag complexity, including visual feedback, drop zones, and reordering logic. This tutorial demonstrates how to add drag-to-reorder functionality to any Angular list using the CDK Drag and Drop module, requiring minimal code and no external libraries.

Accessibility Angular Angular CDK

Make Any List Keyboard-Friendly in Minutes

September 25, 2025

Keyboard navigation in lists requires handling arrow keys, home/end keys, type-ahead search, and focus management, but implementing this manually is complex and error-prone. The Angular CDK ListKeyManager provides a complete solution for keyboard-accessible lists, handling all navigation patterns automatically. This tutorial demonstrates how to use ListKeyManager to make any list keyboard-friendly, ensuring your Angular applications are accessible to all users without manual keyboard event handling.

Angular Angular CDK Angular Components

Teleport a Component in Angular (and Keep Its State)

September 18, 2025

Moving components to different DOM locations in Angular typically destroys component state because Angular recreates views when templates change. The Angular CDK DomPortal provides a solution by moving live DOM elements without destroying component instances, preserving state, event listeners, and component lifecycle. This tutorial compares three approaches: ng-template with ngTemplateOutlet, CDK Template Portal, and CDK DomPortal, showing when each preserves state and when components get recreated.

Accessibility Angular Angular CDK

Just Another Angular CDK Feature Nobody Talks About

July 17, 2025

Treating all focus events identically creates poor user experiences—keyboard users see aggressive error messages meant for mouse interactions, and programmatic focus triggers unwanted UI changes. The Angular CDK's Focus Monitor detects how users interact with elements, distinguishing between mouse clicks, keyboard navigation, touch, and programmatic focus. This tutorial demonstrates how to use Focus Monitor to create adaptive UIs that respond intelligently to different interaction patterns, improving accessibility and user experience.

Angular Angular CDK Angular Components

Toast Notifications in Angular? Easier Than You Think!

April 24, 2025

Toast notifications provide user feedback for actions, errors, and system messages, but building them from scratch requires overlay management, positioning, and animation coordination. Angular Material's Snackbar service handles all of this complexity, providing a simple API for displaying toast notifications with actions, custom durations, and styling. This tutorial demonstrates how to implement toast notifications using Angular Material, including advanced patterns like triggering overlays from snackbar actions.

Angular Angular CDK Angular Components

How to Build a Resizable Sidebar in Angular (Step-by-Step)

April 17, 2025

Resizable sidebars improve UX by letting users customize layouts, but implementing drag-to-resize functionality requires handling mouse events, calculating dimensions, and managing state. The Angular CDK Drag and Drop module simplifies this by providing built-in drag handling, boundary detection, and state management. This tutorial demonstrates how to build a resizable sidebar using only the Angular CDK, creating a professional drag-to-resize experience without external libraries.

Angular Angular CDK Angular Components

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.

Angular Angular CDK Angular Components

Angular CDK Auto-Resizing Textareas: Dynamic Height Control

June 28, 2024

Fixed-height textareas create poor user experiences when content exceeds the visible area, forcing users to scroll within a small box. Auto-resizing textareas improve UX by expanding to fit content, eliminating scrollbars, and providing visual feedback as users type. The Angular CDK TextField module includes a directive that handles all the complexity of auto-resizing textareas, including proper height calculations and performance optimizations. This tutorial shows you how to implement auto-resizing textareas in minutes.

Accessibility Angular Angular CDK

Angular CDK Accordion: Build Expandable Sections Easily

June 21, 2024

Accordion components organize content into collapsible sections, but building them from scratch requires managing state, keyboard navigation, ARIA attributes, and accessibility features. The Angular CDK Accordion module provides all of this out of the box, making it easy to create accessible, keyboard-friendly accordions. This tutorial shows you how to use the CDK Accordion module to build expandable content sections with proper ARIA support and keyboard navigation.

Angular Angular CDK Angular Components

Angular CDK Copy to Clipboard: Easy Text Copying

June 01, 2024

Copying text to the clipboard in Angular applications requires handling browser APIs, permission checks, and error scenarios. The Angular CDK's Clipboard module simplifies this with a directive that handles all the complexity, including cross-browser compatibility and user feedback. This tutorial shows you how to add one-click copy functionality to any element using the CDK Clipboard directive, handle success and error states, and provide user feedback.

Angular Angular Animations Angular CDK

Angular toSignal(): Convert Observables to Signals (v19+)

April 07, 2024

Converting Observables to signals in Angular eliminates the need for async pipes, simplifies change detection, and reduces template complexity. While Observables excel at event streams and async operations, signals provide better performance for UI state that needs to update reactively. Angular's toSignal() function bridges these worlds, letting you transform Observable streams into reactive signals. This tutorial shows you how to convert common Observable patterns to signals, when to use each approach, and how to optimize performance.

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.

Accessibility Angular Angular CDK

Angular CDK Focus Trap: Make Modals Keyboard Accessible

December 15, 2023

Focus trapping is essential for accessible modals, dialogs, and dropdowns. Without it, keyboard users can tab into content behind overlays, creating a confusing and inaccessible experience. The Angular CDK's cdkTrapFocus directive makes implementing focus traps simple, automatically managing keyboard navigation within a container and returning focus when closed. In this tutorial, you'll learn how to use the focus trap directive, enable auto-focus on open, and ensure your modals meet WCAG accessibility standards. All examples work with Angular v19+ and standalone components.

Angular Angular CDK Angular Components

Angular CDK Viewport Ruler: Monitor Resize Events and Get Viewport Dimensions

November 17, 2023

When you need to react to viewport resize events or get viewport dimensions programmatically, the Angular CDK Viewport Ruler is the tool you need. This utility provides a clean, Angular-friendly way to monitor window resize events, get viewport size and scroll position, and handle responsive behavior that goes beyond CSS media queries. In this guide, you'll learn how to use the Viewport Ruler to close modals on resize, sync component state with viewport changes, and access viewport dimensions in your TypeScript code. All examples work with Angular v19+ and standalone components.

Angular Angular CDK Angular Components

Angular CDK Breakpoint Observer: Monitor Media Queries Programmatically

October 05, 2023

When CSS media queries aren't enough, when you need to change component logic, toggle functionality, or conditionally render based on viewport size, the Angular CDK Breakpoint Observer is your solution. This utility lets you monitor media queries programmatically and react to breakpoint changes in your TypeScript code. In this tutorial, you'll learn how to use the Breakpoint Observer to sync JavaScript behavior with CSS breakpoints, share breakpoint values between CSS and TypeScript, and leverage Material Design's predefined breakpoints. All examples work with Angular v19+ and standalone components.