DEV Community

Gérôme Grignon
Gérôme Grignon

Posted on • Originally published at angular.courses

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

#webdev #angular

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.

<!-- Previous approach (still works, but will be deprecated) -->
<input type="email" [field]="loginForm.email" />

<!-- Recommended approach -->
<input type="email" [formField]="loginForm.email" />
Enter fullscreen mode Exit fullscreen mode

Under the hood, both directives share the same implementation. Looking at Angular's internal code reveals they're literally interchangeable options:

readonly formFieldBindings: Signal<readonly (Field<unknown> | FormField<unknown>)[]>;
Enter fullscreen mode Exit fullscreen mode

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:

// Focus the first field in the form
this.loginForm().focusBoundControl();
Enter fullscreen mode Exit fullscreen mode

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 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:

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 

@switch(status) {
  @case('pending') {
    <status-badge>Waiting</status-badge>
  }
  @case('processing') {
    <status-badge>Waiting</status-badge>
  }
  @case('completed') {
    <status-badge>Done</status-badge>
  }
}
Enter fullscreen mode Exit fullscreen mode

With Angular 21.1 

@switch(status) {
  @case('pending')
  @case('processing') {
    <status-badge>Waiting</status-badge>
  }
  @case('completed') {
    <status-badge>Done</status-badge>
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

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 
@let merged = {...defaultConfig, ...userConfig};
@let combined = {a: 1, ...partialObject, b: 2};
@let nested = {config: {...{nested: {...deepConfig}}}};
Enter fullscreen mode Exit fullscreen mode

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:

import { provideStabilityDebugging } from "@angular/core";

export const appConfig: ApplicationConfig = {
  providers: [
    // Add during development to debug stability issues
    provideStabilityDebugging(),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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 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:

import {
  provideRouter,
  withExperimentalAutoCleanupInjectors,
} from "@angular/router";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withExperimentalAutoCleanupInjectors()),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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:

// Old approach (deprecated)
const isActive = this.router.isActive('/dashboard', true);

// New Signal-based approach
const isActive = this.router.isActive('/dashboard', true); // Returns Signal<boolean>
Enter fullscreen mode Exit fullscreen mode

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 for details.

Platform Navigation API Integration (Experimental)

The browser's Navigation API provides a modern approach to handling navigation. Angular 21.1 exposes experimental integration:

import { withExperimentalPlatformNavigation } from "@angular/router";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withExperimentalPlatformNavigation()),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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 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 tool, and stay updated with the latest releases through Release Insights.

Top comments (0)