Host directives are a great way to compose reusable behavior in Angular, but they had one frustrating edge case: two directives could not safely reuse the same shared host directive on the same element. In this post, we'll build a copy button with tooltip behavior, press feedback, and clipboard support, then look at how Angular 22 now de-duplicates shared host directives so this kind of composition works the way you'd expect.
Angular's linkedSignal() just got a small upgrade with a big practical payoff. It can now read from larger signal state and write back to it with a custom setter, giving us a clean field-level API without creating disconnected duplicate state.
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.
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.
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.
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.
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.
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!
