Angular Development Tutorials

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.

Angular Angular Components Angular Forms

Angular Dynamic Components: Pass Data with @Input (v16+)

December 29, 2023

Passing data to dynamically created components in Angular used to require custom injectors and boilerplate code, making component communication cumbersome. Angular 16+ supports using @Input decorators directly with dynamically created components, eliminating the need for manual dependency injection setup. This tutorial shows you how to pass data to dynamic components using the familiar @Input pattern, simplifying your code and making dynamic component creation more intuitive. Note: Modern Angular (v19+) offers signal-based inputs as an even better alternative.

CSS HTML

3 Modern CSS Techniques for Centering Items

December 22, 2023

Centering elements in CSS used to require complex hacks, but modern CSS provides multiple reliable methods. Each approach—positioning, flexbox, and grid—has different use cases and trade-offs. This tutorial demonstrates three modern centering techniques, helping you choose the right method for your layout needs and understand when each approach works best.

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.

Accessibility HTML SEO

Using The New HTML Search Element: Enhancing Semantics for Search Functionality 🔎

December 08, 2023

The HTML <search> element provides proper semantic meaning for search functionality, improving accessibility, SEO, and browser understanding. Before its introduction, developers had no native way to mark search regions, forcing workarounds with generic containers or ARIA landmarks. This tutorial demonstrates how to use the <search> element in common scenarios like site-wide search bars and filtered content lists, ensuring your search functionality is properly identified by assistive technologies and search engines.

Angular Angular Components Angular Styles

New CSS Features in Angular 17: Component Style Improvements

December 01, 2023

Angular 17 introduced simplified component styling options that reduce boilerplate and improve developer experience. Instead of requiring arrays for inline styles, you can now use single strings, and external stylesheet imports are more flexible. This tutorial demonstrates Angular 17's new styling features, showing how they simplify component style definitions and improve code readability.

CSS

Alpha Transparency in CSS Custom Properties

November 24, 2023

CSS custom properties excel at theming and color systems, but adding alpha transparency to custom property colors requires special syntax. The modern CSS rgba() function with custom properties enables dynamic opacity adjustments without duplicating color values. This tutorial demonstrates how to use custom properties with rgba() to create flexible color systems that support transparency variations.

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.

CSS HTML

HTML: How to Resize Markup Like an Image With CSS Container Queries!

November 10, 2023

Replacing images with HTML and CSS improves maintainability and accessibility, but making HTML elements scale proportionally like images requires responsive techniques. CSS Container Queries enable elements to respond to their container's dimensions rather than the viewport, creating truly responsive components. This tutorial demonstrates how to build an HTML/CSS ad that scales proportionally like an image, adapting to different container sizes automatically.

Angular Angular Components Angular Directives

Angular Control Flow: Replace *ngIf, *ngFor, and ngSwitch the Modern Way (v19+)

November 03, 2023

Angular's new control flow syntax replaces the old structural directives (*ngIf, *ngFor, and ngSwitch) with a cleaner, more intuitive template syntax that doesn't require imports or wrapper elements. In this guide, you'll learn how to use @if, @for, and @switch to build modern Angular templates, understand when and why to migrate from the old directives, and discover the performance benefits of built-in tracking. All examples work with Angular v19+ and demonstrate production-ready patterns.

Animation CSS HTML

Look ma... no JavaScript!

October 27, 2023

Scroll-driven animations create engaging, interactive experiences that respond to scroll position, but implementing them with JavaScript requires complex event listeners, performance optimizations, and manual calculations. CSS Scroll-Driven Animations eliminate this complexity by binding animations directly to scroll containers using the animation-timeline property and view() function. This tutorial demonstrates how to create scroll-triggered animations with pure CSS, no JavaScript required.

Angular Angular Components Angular Forms

Angular Host Binding Animations: Animate Components on Enter/Leave (v19+)

October 20, 2023

Animating components as they enter and leave the DOM is a common requirement, but CSS alone can't handle this. Angular's animation framework provides :enter and :leave transitions that work perfectly for this scenario. In this tutorial, you'll learn how to use @HostBinding to automatically animate components when they're added or removed, handle animation callbacks with @HostListener, and create reusable animated components that work anywhere in your app. All examples work with Angular v19+ and modern component patterns.

CSS HTML

CSS Text Truncation: Single-Line and Multi-Line Ellipsis (Complete Guide)

October 13, 2023

Truncating text with an ellipsis sounds simple, until you need to support multiple lines, responsive layouts, and real production browsers. In this guide, you'll learn how to implement single-line and multi-line text truncation using pure CSS, including modern techniques that work across today's browsers. We'll cover text-overflow, -webkit-line-clamp, and layout constraints that make or break truncation in the real world. If you've ever struggled to keep overflowing text under control without JavaScript, this guide will give you clean, reliable solutions.

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.

Animation CSS HTML

Things You Didn’t Know CSS Grid Could Do

September 29, 2023

CSS Grid provides powerful layout capabilities beyond simple two-dimensional grids, enabling centering, stacking, complex layouts, and even animating to unknown heights without JavaScript. This tutorial demonstrates advanced CSS Grid techniques that solve common layout challenges, showing how grid's unique features simplify complex design requirements.

CSS HTML

CSS Masks Guide: Solutions to Common Design Challenges

September 15, 2023

CSS masks solve design challenges that seem impossible with standard CSS properties, enabling fade effects, irregular shapes, and complex image transformations without JavaScript or extra markup. This tutorial demonstrates three practical CSS mask techniques: creating fade-out effects on scrolling containers, adding irregular edge shapes to banners, and transforming square images into hexagonal shapes. You'll learn how CSS masks work and when to use them instead of alternatives like gradients or clip-path.