Angular Development Tutorials

Angular Angular Components Angular Directives

Angular Signal Queries: Replace @ViewChild and @ContentChild the Modern Way (v19+)

April 20, 2024

Angular's traditional @ViewChild and @ContentChild decorators worked well for years, but in the signals era, they now have modern signal-based replacements. In this tutorial, you'll learn how to use signal queries to replace decorator-based queries with reactive, automatically updating references. We'll walk through both viewChild() and contentChild() in Angular v19+, explain how they behave differently from the old APIs, and show real-world examples for accessing template refs and projected content the modern way.

Accessibility Angular Angular Components

Angular Host Attribute Token: Replace Static Inputs with inject() (v18+)

April 13, 2024

Static string inputs that never change create unnecessary overhead in Angular components, triggering change detection and adding complexity. Angular's HostAttributeToken provides a more efficient way to handle static values by reading them directly from HTML attributes, eliminating the need for inputs and improving performance. This tutorial demonstrates how to replace static signal inputs with HostAttributeToken and the inject() function, showing when and why to use this optimization.

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 Animations: Animate to Unknown Height (Deprecated Module)

March 29, 2024

Animating to an unknown height is impossible with pure CSS—you can't transition to auto or 100%, and max-height workarounds require arbitrary values that break in edge cases. Angular's animation framework solves this by calculating the actual height at runtime and animating to that value, creating smooth expand/collapse effects for accordions, dropdowns, and dynamic content. This tutorial demonstrates how to animate elements to their natural height, regardless of content size. Note: This uses Angular's deprecated animations module.

Angular Angular Components Angular Signals

Angular Signal Inputs & output(): The Modern @Input and @Output Replacement (v19+)

March 24, 2024

Angular's traditional @Input() and @Output() decorators have been core to component communication for over a decade, but with signals, there's now a more reactive, type-safe, and declarative alternative. In this tutorial, you'll learn how signal inputs and the output() function replace decorator-based inputs and event emitters in Angular v19+. We'll walk step-by-step through converting a classic input/output component to the modern signal-based approach and explain when, and when not, you should migrate.

Accessibility Angular Angular Animations

Angular Animations: Animate Multiple Items in Parallel (Deprecated Module)

March 15, 2024

Angular animations run sequentially by default, which works for simple transitions but breaks complex animations where multiple properties need to change simultaneously. Parallel animations are essential for coordinated effects like simultaneous fade and slide transitions, or when animating multiple elements together. This tutorial shows you how to run multiple animations in parallel using Angular's animation API, creating more sophisticated and professional effects. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Start and Done Events (Deprecated Module)

March 08, 2024

Coordinating animations with component logic requires knowing when animations start and finish, but CSS animations don't provide lifecycle events. Angular's deprecated animations module includes start and done events that let you trigger side effects, update state, or chain animations based on animation lifecycle. This tutorial demonstrates how to use animation start and done events to coordinate complex animation sequences. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Animations

Angular Animations: Query and Stagger Multiple Items (Deprecated Module)

March 01, 2024

Animating multiple items simultaneously requires querying child elements and coordinating their animations, which is complex with pure CSS. Angular's query() function lets you find and animate multiple elements at once, while stagger() creates cascading delays that produce professional list animations. This tutorial demonstrates how to use query() and stagger() together to create polished list animations where items animate in sequence. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Keyframe Animations (Deprecated Module)

February 23, 2024

Complex multi-step animations require precise control over intermediate states, something CSS keyframes can handle but Angular's keyframes() function makes easier to coordinate with component state and lifecycle. Angular's keyframes function integrates seamlessly with the animation framework, allowing you to create sophisticated sequences that respond to component data and user interactions. This tutorial demonstrates how to use keyframes() to create complex animation sequences. Note: This uses Angular's deprecated animations module.

Angular Angular Animations Angular Styles

Angular Animations: Enter and Leave Transitions (Deprecated Module)

February 16, 2024

Animating elements as they enter and leave the DOM is impossible with pure CSS, but Angular's animation framework provides :enter and :leave transitions that handle this automatically. These transitions create smooth fade-ins, slide-ins, and scale effects when items are added or removed from lists, modals, and dynamic content. This tutorial demonstrates how to use :enter and :leave aliases to create professional enter/leave animations. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Animations: Learn the Basics (Deprecated Module)

February 09, 2024

Animations transform static Angular UIs into engaging, intuitive experiences, but CSS alone can't handle complex scenarios like animating elements as they enter/leave the DOM or coordinating multiple animations. Angular's animation framework provides powerful features beyond CSS, including state-based animations, enter/leave transitions, and programmatic control. This tutorial covers the basics of Angular animations, from enabling the module to creating your first state-based animation. Note: This uses Angular's deprecated animations module—modern alternatives are available.

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.