What's New in Angular 21.1: Signal Forms, Auto Cleanup and Template Support

The Angular ecosystem got off to a fast start in 2026 by announcing Angular 21.1. Following the huge set of new features that v21 brought, 21.1 arrives as a minor release that refines those features, improves the developer experience (DX) and focuses on performance optimizations. The highlights of this release are the structural changes to Signal Forms, router improvements that make memory management easier and new flexibility on the template side.

In this post, we'll take a detailed look at the most important features in Angular 21.1, along with code examples and architectural changes.

Signal Forms: A More Stable and Consistent Structure

Signal Forms, one of Angular's most anticipated features, is still experimental, but it went through a significant overhaul with 21.1. Using the freedom that comes with being experimental, the team shipped some breaking changes in this minor release.

'Field' Is Now 'FormField'

The most striking change on the Signal Forms side is that the Field directive has been renamed to FormField. You now need to use [formField] instead of [field] in your templates. This change was made both to keep Angular internally consistent and to prevent possible name collisions with other libraries in the ecosystem (such as Angular Material).

@Component({
  selector: 'app-user-profile',
  template: 
    <div>
      <mat-form-field>
        <mat-label>Username</mat-label>
        <input
          type="text"
          matInput
          [formField]="userForm.username"
        />
      </mat-form-field>
    </div>
  ,
  imports: [
    FormField,
    MatFormFieldModule,
    MatInputModule
  ],
})
export class UserProfileComponent {
  readonly userForm = form(signal({ username: '' }), (path) => {
    required(path.username, { message: 'Username is required' });
  });
}

In addition, the field property in the validation error interfaces has been renamed to fieldTree. This makes it much more transparent to follow the error tree, especially in complex form structures.

Automatic CSS Class Management

Another new feature in Angular 21.1 is that Signal Forms can automatically add CSS classes based on field state (dirty, touched, valid, invalid, etc.). This can be configured via provideSignalFormsConfig(). As a result, you no longer need to deal with manual class assignments to manage the visual states of your form fields.

Router-Level Memory Management: Auto Cleanup

Lifecycle management of services has always been a critical topic in Angular applications. We usually provide services at the root level (singleton) or define them per component (local). However, services provided at the router level had long been in a kind of "limbo."

The Problem: Injectors That Never Get Cleaned Up

Previously, when you provided a service at the route level (providers: [MyService]), the service was created when the user entered that route, but it wasn't destroyed when the user left the route. Over time, this could lead to memory leaks, especially with services that do heavy work or hold many subscriptions.

The Solution: withExperimentalAutoCleanupInjectors()

To solve this problem, Angular 21.1 offers an experimental router option. When this feature is enabled, route-provided services are automatically destroyed when the user leaves the route, just like components (ngOnDestroy is triggered).

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      [
        {
          path: 'dashboard',
          component: DashboardPage,
          providers: [DashboardService],
        },
      ],
      withExperimentalAutoCleanupInjectors(),
    ),
  ],
};

By automating memory management, this feature keeps applications stable over long periods, especially large-scale apps with many routes.

Template Syntax Extensions

Angular templates have a structure that resembles JavaScript but has its own rules. Features that exist in JavaScript but not in templates are usually added by the Angular team over time. 21.1 took two big steps here.

Multiple Switch Case Matching

A "fall-through"-like construct, a feature found in modern JavaScript and many other languages, is now available in the @switch control flow. You can now chain multiple @case expressions together to render the same content.

@switch (userRole()) {
  @case ('admin')
  @case ('editor') {
    <button (click="editContent()">Edit</button>
  }
  @case ('viewer') {
    <p>You only have read access.</p>
  }
}

This change significantly reduces code duplication in templates and makes logical grouping easier.

Spread (...) Operator Support

Another long-awaited feature is the ability to use the spread operator directly in templates. You can now use the ... operator when merging objects or arrays, or when passing them to a function as arguments.

<app-custom-card
  [config="{ ...defaultConfig, ...userSettings() }"
  [items="[ ...baseItems, 'New Item' ]"
/>

This makes data manipulation inside templates much more powerful and declarative, especially when building dynamic configurations.

Reactive isActive() and Router Improvements

With Angular 21.1, the Router.isActive() method has been marked as deprecated. The new standalone isActive() function that replaces it offers a reactive design. It returns a computed signal, letting you track active URL changes automatically.

This means that instead of subscribing to router events and doing manual checks to track navigation state, we can directly take advantage of the power of signals.

DevTools and MCP Servers

Angular 21.1 brings improvements not only to the framework core but also to the surrounding tooling:

1. Signal Formatter: A new formatter has been added that makes it possible to inspect signals (especially nested ones) in browser DevTools in a much more readable and understandable way. 2. MCP (Model Context Protocol) Support: New MCP server tools are reported, aimed especially at improving AI-assisted development workflows. This makes communication between the dev server and the code editor smarter.

Future Plans and Roadmap

With its published schedule, the Angular team hints that we're nearing the end of the v21 series. According to current plans:

• Last week of February 2026: Angular 21.2 is expected.
• May 2026: The Angular 22 major release is targeted.

This suggests that the experimental features in Angular 21.1 will become more mature with 21.2, and many of them will land as stable with v22.

Conclusion

Despite its "minor release" label, Angular 21.1 includes critical touches that make developers' lives easier. Signal Forms starting to settle structurally, the memory improvements in the router and templates gaining more JavaScript capabilities are proof of how quickly the framework is adapting to modern web standards.

If you use route-level services heavily in your application or are experimenting with Signal Forms, now is a great time to move to 21.1 and try out these new features.