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 22 lets ComponentPortal apply directives to a dynamically rendered component’s host element. In this post, we’ll use that to add a custom directive to the same help component rendered through both CdkPortalOutlet and DomPortalOutlet.
Dev Life, But Funnier!
Angular Material dialogs just got a practical upgrade. In Angular 22, dialogs can now bind directly to component inputs, outputs, and model inputs. That means we can build one reusable component, use it inline, and then open that same component inside a dialog without creating a special wrapper component.
Angular's @switch block has become a lot more useful recently. With exhaustive type checking, Angular can now catch missing template states when a TypeScript union or enum changes. And with grouped cases, we can remove duplicate markup when multiple states render the same UI. In this post, I'll show both improvements using a real-world example.
Angular Material v22 adds a small but surprisingly useful improvement to buttons: built-in progress indicator support. Instead of manually swapping button text with a spinner and dealing with layout jumpiness, we can let the Material button directive manage the loading UI for us. In this post, I'll show you the old manual approach, why it creates a small UX issue, and how Angular Material v22 cleans it up.
Angular v22 is experimenting with a new way to expose your app’s real capabilities to AI. Instead of letting models guess what's happening by scraping the DOM, we can now provide explicit, state-backed tools directly to the browser. This post walks through setting up WebMCP tools to bridge the gap between your Angular state and AI models like Gemini.
Angular v22 just made lazy-loading services much simpler. In this post, we'll explore how to leverage the new injectAsync() API to reduce your main bundle size and replace awkward lazy-loading workarounds. We’ll compare the older manual lazy-loading approach with Angular v22’s new injectAsync() API and see why the new pattern feels simpler and easier to reason about.
Every Angular developer is familiar with @Injectable({ providedIn: 'root' }) for declaring services. While powerful, the @Injectable decorator supports many advanced configurations that are rarely used in typical application services. Angular 22 introduces a new @Service decorator designed to simplify service declaration for the most common use cases. This post will explore how it streamlines service creation and even enforces modern dependency injection patterns.
You ever use AI to generate Angular code that's almost right, but not quite? You end up renaming things, swapping decorators for signals, and rewriting *ngIf to @if every single time. Well, in this post, I'll show you how to use Cursor Skills to encode those fixes once and automate your Angular workflow for the whole team.
Signal Forms just fixed a subtle, but important, issue you’ve likely shipped without realizing. If you’re using <input type="number">, it's likely that you're introducing UX issues that only show up during real interaction. In this example, I'll show you a better approach that will be available in Angular v22.
If you’ve ever tried to build something like a password checklist in Signal Forms, you’ve probably run into a frustrating limitation. You need to know if a specific validation rule failed, but the errors API doesn’t make that easy. And if you try to rely on error indexes, things can break pretty quickly as errors come and go. This post walks through how Angular v22 gives us a simple fix for this with the new getError() function.
If you're using Signal Forms with async validation, you've probably run into a frustrating issue. You either debounce every validator with the debounce() function, or you end up hitting your API on every keystroke. Neither is great, but Angular 22 fixes this in a really clean way. This post walks through how the new built-in debounce works and why it makes Signal Forms even better.
What if you could start using Signal Forms today without touching your existing Reactive or Template-driven forms at all? In Angular 22, you'll be able to build Signal-based custom form controls that drop right into your existing forms with no massive rewrites required. This post walks through how to migrate a custom control from ControlValueAccessor to FormValueControl while keeping the parent form completely intact.
Every Angular developer has faced it, an input that spams the backend with every single keystroke. The classic solution involves pulling in RxJS and using debounceTime, but it requires converting signals to observables and thinking in streams. As of Angular v22, there’s a new, cleaner way. The new experimental debounced() signal primitive lets you solve this problem in a more declarative, signal-native way. This post walks through the old way and then refactors it to the new, showing you exactly how to simplify your async data-fetching logic.
In a recent guide I showed a pattern for building large Angular Signal Forms using reusable form sections. But a common follow-up question kept coming up: Why not just use FormValueControl instead? It sounded like a great idea, so I tried it. In this post you'll see how it works and why I'm not completely convinced it's actually the better approach for this scenario.
What happens if a user clicks submit while your async validator is still checking the server? Do you submit bad data? Block the user? Silently fail? Angular Signal Forms now gives you explicit control over that behavior with the ignoreValidators option. In this guide, we'll walk through all three modes so you can choose the right strategy for your real-world Angular applications.
Number inputs in Angular Signal Forms had a subtle but frustrating problem, there was no clean way to represent an empty numeric field. But, as of v21.2.0, this issue has been quietly fixed. Let me show you exactly what this looked like before, and then follow it up with how it works now.
Form submission in Angular Signal Forms has always required a bit of manual wiring: a submit handler, preventDefault, and an explicit call to submit(). It works, but it doesn't feel fully Angular. Starting in Angular 21.2-next.3, the new formRoot directive changes that. It makes form submission completely declarative, moves submission logic into the form itself, and eliminates the remaining boilerplate. This post walks through exactly how it works and how to migrate an existing Signal Form in about 60 seconds.
What if you could start using Angular Signal Forms inside an existing Reactive Form without rewriting the entire thing? Well, in Angular 21.2-next, you can! The new SignalFormControl class acts as a compatibility bridge, letting you mix signal-backed fields into a traditional FormGroup while keeping your existing form structure intact. This post walks through how it works, how to add it to an existing form, and what changes in the template.
If you've ever created a method just to call update() on a signal, this one's for you. Writing signal updates directly in component templates used to be impossible, but as of Angular 21.2-next, arrow functions are now allowed in Angular templates! This change lets you write signal transitions exactly where they happen, making templates more expressive and eliminating unnecessary wrapper methods. But while it's incredibly powerful, there are a few caveats you absolutely need to understand.
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.