NOTE: I’m going to publish more and more YouTube videos this year. If interested, you can subscribe to my YouTube page.
Angular 21.1 is available and offers many interesting features, but keep in mind that almost all of them are experimental at this point, meaning they’re not ready for production use.
Signal Forms Updates
Signal Forms are an experimental feature, and it shows in version 21.1, as there are two breaking API changes:
- The field directive was renamed to formField
- The field property was renamed to fieldTree
This means we have to use the form field directive as follows from now on:
instead of:
It’s unclear if there will be an automated migration as the API is still experimental and could change again.
Some actual welcome features now:
focusBoundControl() method
Finally, Angular knows how to focus form fields without using native APIs!
this.userForm.firstName().focusBoundControl();
As expected, the code above focuses on the form element bound to the firstName form property.
CSS classes for validation state
If you missed “ng-valid”, “ng-dirty”, and all, in Signal Forms, and enjoyed my video on how to get those classes back, well, now we can do even better with a new config option in the providers of ApplicationConfig:
provideSignalFormsConfig({
classes: {
"ng-invalid": field => field.state().invalid(),
"ng-valid": field => field.state().valid() && field.state().required(),
"ng-dirty": field => field.state().dirty()
}
})
As you can guess from the above code, you can pick your own class names and map them to field conditions, which means you can customize precisely when to apply these classes. For instance, in this example, I apply “ng-valid” only for required fields that are valid.
Get Alain Chautard’s stories in your inbox
Join Medium for free to get updates from this writer.
The nice thing about this approach is that you can use CSS classes from your component library or CSS stylesheet of choice, without having to stick with “ng-pristine” or “ng-invalid” anymore.
Control flow — Switch/case improved
If you like using switch /case flows, you’ll enjoy the new option to have multiple cases display the same HTML:
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB)
@case (caseC) {
Case B or C.
}
@default {
Default case.
}
}
Template spread operator
It’s now possible to use the spread operator in Angular templates, for arrays, objects, and function parameters:
@let copy = {...obj, foo: 'bar'};
Router features
The router gets its first official (and stable) Signal-based function, isActive, which returns a computed signal indicating whether a route is active. As you can see, you can decide whether to ignore URL query params and such:
private router = inject(Router);isSettingsActive = isActive('/dashboard', this.router, {
paths: 'exact',
queryParams: 'ignored'
});
Here are the possible options:
interface IsActiveMatchOptions {
matrixParams: "exact" | "subset" | "ignored";
queryParams: "exact" | "subset" | "ignored";
paths: "exact" | "subset";
fragment: "exact" | "ignored";
}
Two experimental features are added as well:
- withExperimentalAutoCleanupInjectors() — a config that implements garbage collection for services defined at the route level, which is a great idea!
- withExperimentalPlatformNavigation() — Allows the router to use the browser’s
NavigationAPI for navigation, meaning it can now intercept browser navigation events outside the Angular application.
MCP server updates
I wrote about the Angular MCP server earlier, and it now supports building, starting, and stopping a dev server, waiting for a build to complete, running unit tests, and running end-to-end tests.
The main purpose is to allow IDE coding agents to check their work by running ng serve, tests, and verifying that the code compiles, which is great.
Also, the AI tutor feature has a new tutorial on Signal Forms.
That’s it for Angular 21.1, quite a nice release with interesting features to try!
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become proficient with Angular / React / JavaScript.
If you need any help learning web technologies, feel free to get in touch!
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and YouTube video page.
