This website is Brian Treese's Angular Development Blog. The site provides practical, hands-on tutorials and resources for developers who use the Angular framework. The tutorials cover modern Angular techniques including Signals, Components, Forms, Animations, CDK (Component Dev Kit), and Styling. Each tutorial includes code examples, video demonstrations, and step-by-step instructions to help you build Angular applications.
Angular recently introduced a new accessibility package called Angular ARIA, released in Developer Preview a few weeks ago. If you've seen it mentioned in the docs, you've probably wondered: Do I need this? Is this something I should start using now? And what problem is it actually trying to solve?
Dev Life, But Funnier!
You've got a form working perfectly with Reactive Forms and Zod validation, but after migrating to Signal Forms, your validation stops working. Forms submit even when invalid, and error messages disappear. The problem? Signal Forms use a completely different validation API than Reactive Forms. Angular's validateTree() function bridges this gap by translating Zod's error map into Signal Forms' validation format. This lets you keep centralized Zod schemas while still leveraging Signal Forms’ reactive state management. This step-by-step tutorial shows exactly how to wire Zod validation into Angular Signal Forms.
Reactive Forms automatically apply state classes like ng-touched, ng-dirty, and ng-valid, but Signal Forms initially lacked this feature. Recent Angular updates restored automatic state classes with full customization capabilities, allowing you to configure class names, add custom states, and control when classes are applied. This tutorial demonstrates how to enable and customize Signal Forms state classes, going beyond what Reactive Forms ever allowed.
Cross-field validation in Reactive Forms requires validator functions at the form level, making validation logic scattered and hard to maintain. Angular's Signal Forms API simplifies cross-field validation by allowing validators to access other field values directly using valueOf, keeping validation logic colocated with form definitions. This tutorial demonstrates how to build password confirmation validators and other cross-field validations using Signal Forms' validate() function.
Async validation in Reactive Forms requires separate validator functions, manual debouncing, and complex pending state management. Angular's Signal Forms API simplifies async validation with validateAsync() and resource(), providing built-in debouncing, pending states, and cleaner error handling. This tutorial demonstrates how to implement async validation in Signal Forms, including server-backed username checks, real-time feedback, and proper pending state management.
Custom validators are essential for real-world forms, but implementing them with Reactive Forms requires separate validator functions and complex error handling. Angular's Signal Forms API simplifies custom validation by integrating validators directly into form definitions with cleaner syntax and better type safety. This tutorial demonstrates how to migrate custom validators from Reactive Forms to Signal Forms, showing how the new API makes validation logic more maintainable and reactive.
Reactive Forms work, but complex forms become messy with imperative state management, verbose error handling, and scattered validation logic. Angular's Signal Forms API provides a cleaner, more reactive approach that reduces code complexity, improves type safety, and simplifies form state management. This tutorial demonstrates a real-world form migration, showing side-by-side comparisons that highlight why Signal Forms are better for modern Angular applications.
Dynamic forms with Reactive Forms require FormArrays, complex state management, and imperative code that's hard to maintain. Angular's Signal Forms API provides a more reactive, declarative approach to building dynamic forms, eliminating FormArrays and simplifying field addition/removal. This tutorial demonstrates how to migrate a dynamic form from Reactive Forms to Signal Forms, showing how the new API makes dynamic form management cleaner and more intuitive.
Building custom form controls with ControlValueAccessor requires multiple methods, providers, and boilerplate code, making simple controls unnecessarily complex. Angular's Signal Forms API simplifies custom controls dramatically, reducing code by up to 50% while improving type safety and reactivity. This tutorial demonstrates how to migrate a custom control from ControlValueAccessor to Signal Forms, showing how the new API eliminates boilerplate and simplifies form control development.
Angular's experimental Signal Forms API provides a more reactive, type-safe alternative to Reactive Forms, eliminating boilerplate and improving performance. This tutorial demonstrates how to migrate a real-world Reactive Form to Signal Forms, showing step-by-step how to convert FormGroups, FormControls, validators, and error handling. You'll learn how Signal Forms simplify form state management while maintaining the same user experience.
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.
Angular's deprecated animations module provided start and done events for coordinating animations with component logic, but modern Angular requires a different approach. This tutorial demonstrates how to replace animation start/done events using pure CSS keyframes, Angular signals, and standard DOM events. You'll learn how to detect animation completion, coordinate multiple animations, and trigger side effects when animations finish, all without the deprecated module.
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.
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.
Jump links improve navigation in long-form content, but Angular's routing system breaks standard HTML anchor links. Implementing jump links in Angular requires handling router navigation, smooth scrolling, and ensuring links work across different route configurations. This tutorial demonstrates how to create router-friendly jump links that work seamlessly with Angular's routing system, providing smooth scrolling and proper navigation handling.
Angular's deprecated animations module leaves developers wondering how to create advanced animations without the DSL. The modern approach combines Angular's new enter/leave animation primitives with pure CSS animations, providing better performance, hardware acceleration, and simpler code. This tutorial demonstrates how to build complex animations including staggered list animations, sequential effects, and coordinated multi-element transitions using modern Angular animation techniques.
Angular's viewChild() signal query is powerful, but the read parameter unlocks advanced scenarios most developers never discover. Instead of just querying components and elements, you can read specific tokens, directives, or providers, accessing lower-level APIs and creating more flexible component architectures. This tutorial demonstrates how to use the read parameter to query ElementRef, ViewContainerRef, TemplateRef, and custom tokens, showing real-world examples that simplify component code.
Debugging signal dependencies in Angular applications is challenging without visibility into signal relationships and update chains. Angular 20.1 introduced the Signal Graph debugging tool, providing visual representation of signal dependencies, update flows, and reactive relationships. This tutorial demonstrates how to install and use the Signal Graph to understand your application's reactive architecture, debug signal issues, and optimize signal-based code.
Session timeout warnings prevent users from losing unsaved work by providing clear countdown feedback before automatic logout. Building effective session timers requires real-time countdown logic, visual feedback with animations, and color-coded warnings that escalate as time runs out. This tutorial demonstrates how to build a session timer component in Angular with smooth animations, progressive visual warnings, and clear messaging that keeps users informed.
Grid/list view toggles improve UX by letting users choose their preferred content layout, but building flexible toggle components requires managing state, coordinating CSS classes or component trees, and handling both internal and external state management. This tutorial demonstrates how to build a reusable view mode toggle component in Angular that can switch between CSS classes or completely different component structures, supporting both self-contained and parent-controlled state patterns.