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.
Have you ever tried to programmatically focus a form field in Angular and ended up with view queries, nativeElements, ElementRefs, and a tiny voice in your head whispering "there has to be a better way"? As of Angular 21.1.0, there is! The Signal Forms API now exposes a method called focusBoundControl() that lets you focus fields easily using a single method call. Instead of manually walking the DOM, you can ask the form directly.
Dev Life, But Funnier!
Angular 21.1 introduced a feature that sounds small but eliminates a whole class of helper methods we've all written for years. This update lets you compose arrays and objects directly in templates using the spread operator (...). This means you can merge arrays and extend objects declaratively and keep UI logic where it belongs: in the template. Let's see how it works!
AI suggestion textboxes are everywhere right now. From GitHub Copilot to ChatGPT, folks expect AI assistance when working with forms. Adding this capability to your forms doesn't have to be complicated. By creating a custom form control with Angular Signal Forms, you can integrate AI-powered suggestions seamlessly while maintaining proper form state management, request cancellation, and error handling. This tutorial shows you how to build an AI suggestion textbox that works like a native form control, and provides a professional user experience.
Many Angular Signal Forms examples work great for small forms, but what happens when your form grows? When forms are composed of many different sub-forms things can quickly become messy. With Reactive Forms, composition was somewhat straightforward. With Signal Forms it's just different. This guide shows one possible way to structure large forms using reusable form models, section builders, and composable form architecture that scales well.
Angular Signal Forms make client-side validation feel clean and reactive, but how do you actually submit them? Without proper submission handling, forms refresh the page, ignore server validation errors, and lack loading states. Angular's new submit() API solves this by providing async submission, automatic loading state tracking, touched field handling, and seamless server-side error mapping. This guide shows you how to implement Angular Signal Forms form submission the right way.
I recently published a tutorial on using Zod validation with Angular Signal Forms, and it worked perfectly. But a Reddit commenter politely pointed out that I had over-engineered the entire thing!
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?
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.