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:

      <input type="text" [formField]="userForm.firstName">

    

instead of:

      <input type="text" [field]="userForm.firstName">

    

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

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 Navigation API 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!