Angular 21.1 Release: What's New and How to Use It

Angular 21.1 is now available, delivering meaningful improvements to Signal Forms, Control Flow syntax, Router APIs, and developer tooling. This release focuses on developer experience refinements and fills important gaps in the existing APIs. In this guide, we'll break down each feature, explain when you should use it, and provide practical code examples to help you adopt these changes in your projects. ## What's in This Release - **Signal Forms**: New `formField` directive and form focus capabilities - **Control Flow**: Multi-case support in `@switch` blocks - **Image Loaders**: Custom transformations for major CDN providers - **Router**: `isActive` as a Signal, experimental route cleanup, and Navigation API integration - **Developer Tooling**: New stability debugger for SSR/hydration debugging - **Template Expressions**: Support for spread operators and rest arguments ## Signal Forms Improvements Angular's Signal Forms API continues to mature with this release, addressing real-world usage patterns and developer feedback. ### The New formField Directive Angular 21.1 introduces the `formField` directive as the preferred way to bind Signal Form Controls to form elements. While the existing `field` directive continues to work, the Angular team recommends adopting `formField` going forward. **Why the change?** The name `field` proved too generic, potentially conflicting with other libraries or custom directives in your application. The `formField` directive provides a more explicit, Angular-specific namespace. ```html <!-- Previous approach (still works, but will be deprecated) --> <input type="email" [field]="loginForm.email" /> <!-- Recommended approach --> <input type="email" [formField]="loginForm.email" /> ``` Under the hood, both directives share the same implementation. Looking at Angular's internal code reveals they're literally interchangeable options: ```ts readonly formFieldBindings: Signal<readonly (Field<unknown> | FormField<unknown>)[]>; ``` **Migration tip**: While both options work today, expect a migration schematic in a future release to automate the transition. Start using `formField` in new code now to minimize future migration work. > **Note**: The `formField` directive was technically introduced in Angular 21.0.8, but this release ensures full compiler support and parity with the `field` directive. ### Programmatically Focus a Form A common UX pattern is focusing the first input field when a form loads or after validation errors. Angular 21.1 makes this straightforward with the new `focusBoundControl()` method. Previously, you needed to manually target specific fields using `viewChild` or template references. Now you can focus the first bound control of an entire form: ```ts // Focus the first field in the form this.loginForm().focusBoundControl(); ``` This method finds the first element bound via `field` or `formField` directive and focuses it—perfect for: - Form initialization - After form reset - When validation fails (focus the first invalid field) - Accessibility improvements Thanks to [Matthieu Riegler](https://www.linkedin.com/in/matthieuriegler/) for clarifying the intended use case for this feature! ### Signal Forms Bug Fixes This release addresses several edge cases and missing capabilities in Signal Forms: - [allow custom controls to require dirty input](https://github.com/angular/angular/commit/89c37f1f7f93ec3746479c73b87b948a6e93dcaa) - [allow custom controls to require hidden input](https://github.com/angular/angular/commit/82edf18427b1fcf7e63cb3ac930dfa1d065a25f1) - [allow custom controls to require pending input](https://github.com/angular/angular/commit/1a4c3eb1d09a5db57a07ea5ed593cbe3e47e8125) - [clean up abort listener after timeout](https://github.com/angular/angular/commit/e7d99f02cba503aa7a30f71d388aef353205fff7) - [support custom controls with non signal-based models](https://github.com/angular/angular/commit/cb09fb8308a7c94cca9af6074ef523ce094d5f67) - [Support readonly arrays in signal forms](https://github.com/angular/angular/commit/282220d032a64d32c466bb37057c6f91df39bfb3) ## Control Flow: Multi-Case Switch Blocks One of the most requested Control Flow features is here: you can now combine multiple `@case()` conditions for a single block in `@switch`. ### Before Angular 21.1 ```html @switch(status) { @case('pending') { <status-badge>Waiting</status-badge> } @case('processing') { <status-badge>Waiting</status-badge> } @case('completed') { <status-badge>Done</status-badge> } } ``` ### With Angular 21.1 ```html @switch(status) { @case('pending') @case('processing') { <status-badge>Waiting</status-badge> } @case('completed') { <status-badge>Done</status-badge> } } ``` This eliminates code duplication and makes your templates more readable—especially useful for: - Grouping similar states (loading, pending, processing) - Handling multiple enum values with the same UI - Reducing template maintenance burden ## Image Loader Enhancements If you're using Angular's `NgOptimizedImage` directive with a CDN provider, you now have more control over image transformations. Angular 21.1 adds custom transformation support for: - **Cloudflare** Images - **Cloudinary** - **ImageKit** - **Imgix** This means you can apply provider-specific transformations (like format conversion, quality adjustments, or effects) while still benefiting from Angular's optimized image loading. For implementation details and configuration examples, see the [official NgOptimizedImage documentation](https://angular.dev/guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage). ## Enhanced Template Expression Support Angular's template compiler now supports additional JavaScript expression features: - **Rest arguments** in function calls - **Spread elements** in arrays - **Spread expressions** in objects ```html @let merged = {...defaultConfig, ...userConfig}; @let combined = {a: 1, ...partialObject, b: 2}; @let nested = {config: {...{nested: {...deepConfig}}}}; ``` **A word of caution**: While these features are now supported, they can make templates harder to read and debug. Consider keeping complex logic in your component class and exposing simple, computed values to templates. Templates should primarily handle presentation, not data transformation. ## Debugging Application Stability Server-Side Rendering (SSR) and hydration issues often manifest as applications that never "stabilize"—preventing hydration from completing or causing unexpected behavior. Angular 21.1 introduces `provideStabilityDebugging()` to help diagnose these issues: ```ts import { provideStabilityDebugging } from "@angular/core"; export const appConfig: ApplicationConfig = { providers: [ // Add during development to debug stability issues provideStabilityDebugging(), ], }; ``` This utility is provided by default in dev mode when using `provideClientHydration`. You can also add it manually to the application providers for use in production bundles or when using SSR without hydration, for example. The feature logs information to the console if the application takes longer than expected to stabilize. For detailed usage instructions, see [Debugging Application Stability](https://angular.dev/guide/hydration#debugging-application-stability) in the official documentation. ## Router Improvements ### Route Provider Cleanup (Experimental) A long-standing behavior in Angular Router: providers defined at the route level were never destroyed when navigating away. This could lead to memory leaks and unexpected state persistence. Angular 21.1 introduces an experimental feature to automatically clean up route-level injectors: ```ts import { provideRouter, withExperimentalAutoCleanupInjectors, } from "@angular/router"; export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes, withExperimentalAutoCleanupInjectors()), ], }; ``` **When to use this**: If your routes define providers that hold significant state or resources, enabling this feature ensures proper cleanup. Test thoroughly, as this changes the lifecycle behavior your application may depend on. ### Router.isActive as a Signal The `Router.isActive` method is now a computed Signal, enabling fine-grained reactivity for navigation state: ```ts // Old approach (deprecated) const isActive = this.router.isActive('/dashboard', true); // New Signal-based approach const isActive = this.router.isActive('/dashboard', true); // Returns Signal<boolean> ``` **Bundle size note**: This feature adds approximately 1.3KB to your bundle, but it's tree-shakable. Applications not using `Router.isActive` or `RouterLinkActive` won't pay this cost. If you're implementing custom route reuse strategies, you can now integrate with this new behavior. See the [custom route reuse strategies documentation](https://angular.dev/guide/routing/customizing-route-behavior#creating-a-custom-route-reuse-strategy) for details. ### Platform Navigation API Integration (Experimental) The browser's [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) provides a modern approach to handling navigation. Angular 21.1 exposes experimental integration: ```ts import { withExperimentalPlatformNavigation } from "@angular/router"; export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes, withExperimentalPlatformNavigation()), ], }; ``` This experimental feature allows Angular Router to leverage browser-native navigation handling for potentially improved performance and better integration with browser features like the back/forward cache. ## SSR API Parity ### createApplication Improvements The `createApplication` function now accepts a [BootstrapContext](https://angular.dev/api/platform-browser/BootstrapContext) parameter, bringing it to parity with `bootstrapApplication`. This matters when you're building custom SSR solutions or test harnesses that need fine-grained control over application creation. Additionally, `createApplication` now works with JIT-compiled components, removing a previous limitation that required AOT compilation. ## Summary Angular 21.1 delivers practical improvements across the framework. The Signal Forms API continues to mature, Control Flow becomes more expressive, and developer tooling improves. These incremental improvements compound over time, making Angular applications easier to build and maintain. For tracking Angular features across versions, check out our [Can I Use - Features](https://www.angular.courses//caniuse/features) tool, and stay updated with the latest releases through [Release Insights](https://www.angular.courses//releases/insights).