Angular

Angular 22.1: new features for developers

Marco Molteni 5 min read Share
Angular 22.1: new features for developers
ℹ️ Draft: Angular 22.1 is currently available as a release candidate. This post will be updated when the stable version is released.

Angular 22.1.0 will be released on July 28, 2026. It's a bugfix release, but we can find some minor new features added to the framework.

The most interesting changes for application developers are:

  • CSS variable namespacing for applications sharing the same page
  • Better support for foreign components inside Angular control flow
  • New SSR HTTP transfer-cache options
  • An @Injectable to @Service migration
  • Improvements to Signal Forms
  • Server-build optimization in the Angular CLI
  • Better Signal Forms integration in Angular Material
  • Full-width Material slide toggles

Compiler improvements and small bug fixes are mostly not included in this post.

CSS variable namespacing

Angular 22.1 introduces CSS custom-property namespacing.

This is useful when multiple Angular applications are running on the same page. Without namespacing, two applications can define the same CSS variable:

:host {
  --primary-color: blue;
}

Another application could accidentally inherit or override it.

The feature can be enabled in app.config.ts:

import { APP_ID, ApplicationConfig } from '@angular/core';
import { provideCssVarNamespacing } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_ID,
      useValue: 'customer-portal',
    },
    provideCssVarNamespacing('customer-portal_'),
  ],
};

Angular adds the configured namespace to CSS variables used inside component styles.

This applies to the styles and styleUrls declared in Angular components. It does not modify global styles.

A variable can be excluded from namespacing with the --global-- prefix.

For JavaScript code that needs to read a CSS variable, Angular also provides CssVarNamespacer:

import { CssVarNamespacer, inject } from '@angular/platform-browser';

const namespacer = inject(CssVarNamespacer);

const variableName = namespacer.namespace('--primary-color');

const value = getComputedStyle(element)
  .getPropertyValue(variableName);

This feature (GitHub) can be useful for:

  • Micro-frontends
  • Angular Elements
  • Portals with multiple Angular applications
  • Applications embedded in another application

Foreign components inside Angular control flow

Angular improves the support for foreign components inside @if, @for and other control-flow blocks.

A foreign component is a component that is not compiled as a normal Angular component. This can be useful when integrating Angular with web components or another component system.

For example:

@if (selectedProduct(); as product) {
  <external-product-card [product]="product" />
}

Angular can now correctly use values from the parent Angular view when the foreign component is rendered inside a control-flow block.

This is probably not important for a standard Angular application, but it can simplify interoperability projects and micro-frontend architectures. (GitHub)

New HTTP transfer-cache options

Angular SSR uses an HTTP transfer cache to avoid repeating on the client requests that were already executed on the server.

By default, Angular avoids caching requests containing credentials and responses marked as non-cacheable.

Angular 22.1 adds options that allow developers to opt in to these cases:

withHttpTransferCache({
  includeRequestsWithCredentials: true,
  includeNonCacheableRequests: true,
});

This gives more control over applications that need authenticated or non-standard SSR requests. (GitHub)

Remember: Caching a response containing private user information can expose data in the server-rendered HTML or transfer state. It should only be enabled when the SSR architecture and caching strategy are understood.

Migration from @Injectable to @Service

Angular 22 introduced the new @Service decorator for application services.

Angular 22.1 adds a migration that converts eligible services from @Injectable to @Service. (GitHub)

The migration can be executed with:

ng generate @angular/core:service

A specific part of the application can be migrated with:

ng generate @angular/core:service --path src/app/orders

Before:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class OrderService {}

After:

import { Service } from '@angular/core';

@Service()
export class OrderService {}

The migration only converts services where the change can be safely applied.

This is a small improvement, but @Service makes the intention of the class more explicit. @Injectable can describe several types of injectable classes, while @Service communicates that the class represents an application service.

Extra bonus if you are a Java Spring developer.

Signal Forms improvements

Signal Forms continue to receive fixes and improvements.

Angular 22.1 adds support for multiple asynchronous validators and fixes the propagation of the pending status to the root form (GitHub).

It also improves the handling of intermediate number values and prevents stale ControlValueAccessor updates when debouncing form changes. (GitHub)

These changes are important because Signal Forms are still new. Small inconsistencies in validation or pending state can have a visible impact on real forms.

Angular CLI and build improvements

Angular CLI 22.1 adds chunk optimization for server builds.

This should reduce unnecessary or duplicated chunks in applications using Server-Side Rendering.

The build system also adds:

  • A built-in SQLite cache fallback
  • A persistent cache shared between Git worktrees
  • Stable debug IDs for subresource-integrity hashes
  • Support for the standard Forwarded HTTP header in Angular SSR

The shared worktree cache can be useful for developers maintaining multiple branches of a large Angular project at the same time.

Angular Material 22.1

Angular Components includes Angular Material, CDK and Angular Aria.

The most visible new Material API in version 22.1 is the full-width slide toggle.

Full-width slide toggle

MatSlideToggle receives a new fullWidth input (documentation):

<mat-slide-toggle
          [fullWidth]="fullWidth()"
          labelPosition="before"
        >
          Email notifications
</mat-slide-toggle>

The slide toggle expands to fill the width of its container.

This can be useful for mobile settings pages where the complete row should behave as one control. (GitHub)

Material and Signal Forms

Angular Material improves its integration with Signal Forms.

The Material error-state matcher has been updated to understand Signal Forms.

A Signal Form can also be assigned to the Angular CDK stepper using stepControl:

<cdk-step [stepControl]="personalDetailsForm">
  <!-- step content -->
</cdk-step>

This is important for multi-step forms because the stepper can use the form state to decide whether the user can continue to the next step. (GitHub)

CDK and Angular Aria

The CDK collections package adds support for selecting or deselecting multiple values in one operation.

Virtual scrolling also receives fixes intended to reduce visible jumping when items are rendered and recycled.

Angular Aria includes several accessibility improvements:

  • Read-only comboboxes
  • Better combobox placeholder contrast
  • Navigation directly to a listbox index
  • Better keyboard handling for disabled grid cells
  • Improved focus behavior for Material radio buttons and lists

Most of these are small improvements, but they help applications that rely heavily on keyboard navigation and accessible custom components. (GitHub)

How to test Angular 22.1

Angular 22.1 is still a release candidate, so it should be tested in a separate branch.

For the Angular framework and CLI:

ng update @angular/core@next @angular/cli@next

For Angular Material:

ng update @angular/material@next

Do not use the release candidate directly in a production application without testing the build, SSR behavior, forms and Material components.

Who will benefit more?

Who will benefit more from this release:

  • Multiple Angular applications on the same page
  • Micro-frontends
  • Signal Forms
  • Angular Material steppers
  • Server-Side Rendering
  • Large builds with multiple Git worktrees

The CSS-variable namespacing feature is probably the most interesting addition.

For standard business applications, Angular 22.1 should be a relatively simple minor update, but Signal Forms and SSR applications deserve additional testing.

TypeScript 7?

TypeScript 7 promised a great improvement in performances, this release is still working with TS 6.x.

Sources

  • Angular framework changelog.
  • Angular framework releases. (GitHub)
  • Angular CLI changelog.
  • Angular Components releases. (GitHub)
  • CSS-variable namespacing proposal and implementation. (GitHub)