Angular Development Tutorials

Angular Angular Components Angular Signals

Using @HostBinding with Signals

May 25, 2024

If you’re building apps with Angular, you’re probably using signals more and more every day. This can definitely be a challenge at times because it’s such a different way of working. And, there are things that just don’t quite work with signals yet, like @HostBinding for example. Well in this post, I’m going to demonstrate how we can actually use the @HostBinding decorator with signals, pretty easily right now even though the decorator was not originally built to support them directly. Alright, let’s get to it.

Accessibility Angular Angular Animations

Angular Animations: Disable/Enable Animations (Deprecated Module)

May 19, 2024

Unwanted animations on component initialization create jarring user experiences and performance issues. Sometimes animations should only run on user interactions or data changes, not when components first render. Angular provides mechanisms to disable animations globally, per component, or conditionally based on application state. This tutorial shows you how to control when animations run, disable them for accessibility preferences, and prevent initialization animations. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Create Reusable Animation Functions (Deprecated Module)

May 11, 2024

Duplicating animations across components creates maintenance nightmares and inconsistent user experiences. As Angular applications grow, you need to extract reusable animation functions that can be shared across components. This tutorial shows you how to create reusable animation functions, organize them in shared files, and apply them consistently throughout your application. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Animations

Angular Animations: Add Flexibility with Animation Params (Deprecated Module)

May 04, 2024

Static animations limit component reusability, forcing you to create separate animations for slight variations. Angular's animation params allow you to pass dynamic values to animations, creating flexible, configurable effects that adapt to different use cases. This tutorial demonstrates how to use animation params to create reusable animations that change direction, duration, or style based on component state. Note: This uses Angular's deprecated animations module—for modern approaches, see the linked tutorials.

Angular Angular Components Angular Styles

Angular Native Fallback Content: Default Slots for ng-content (v18+)

April 26, 2024

Fallback content for projected slots in Angular components has required workarounds for years, making components less flexible and harder to use. Angular 18+ introduces native fallback content support for ng-content, allowing you to define default content that displays when no content is projected. This eliminates the need for conditional logic and wrapper components. This tutorial demonstrates how to use native fallback content to create more flexible, user-friendly components.

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.