All posts

What's new in Angular v22

Jun 28, 2026 2 min read
Share

I keep an eye on the wider ecosystem even though I build with Svelte day to day, and Angular v22 (out in June) is a meaty release. The headline theme is “production ready”: three features that spent a release or two in preview are now stable. Here’s what stood out.

Three features graduate to stable

Signal Forms is the new forms API — reactive, composable, and strongly typed. You declare a signal model and wrap it in form(), validators and all:

import { signal } from '@angular/core';
import { form, required } from '@angular/forms/signals';

const paymentModel = signal({ paymentType: '', amount: 0 });

const f = form(paymentModel, (schema) => {
	required(schema.paymentType, { message: 'Required field' });
});

Angular Aria ships twelve accessible UI primitives as production-ready. You bring the styles and business logic; the directives handle keyboard, screen-reader and ARIA patterns. Signal Forms and test harnesses are fully supported.

Async reactivity — resource and httpResource are stable. httpResource declaratively tracks a signal and refetches when it changes, no manual subscription:

export class WeatherComponent {
	selectedCity = signal('Chicago');

	weather = httpResource<{ temperature: number; condition: string }>(
		() => `https://api.example.com/v1/forecast/${this.selectedCity()}`
	);
}

Change detection shifts

Two notable defaults moved:

  • OnPush is now the default for new apps, aligning with zoneless-by-default. You no longer declare it explicitly.
  • ChangeDetectionStrategy.Default was renamed to .Eager — a clearer name for what it actually does.

Quality-of-life APIs

  • @Service() replaces @Injectable({ providedIn: 'root' }) for global singletons. @Injectable stays for cases needing deeper config.
  • injectAsync lazy-loads services for code splitting, with an optional prefetch hook so dependencies can warm up on idle.
  • Templates got more expressive — arrow functions plus spread/rest syntax:
<button (click)="item.update(p => ({ ...p, stock: p.stock - 1 }))">Decrease Stock</button>
  • The router integrates the platform Navigation API via withExperimentalPlatformNavigation() — native scroll restoration and navigation interception with no bundle-size cost.

On the horizon

A new @boundary block brings error boundaries straight into templates — an isolated component crash no longer takes down the page:

@boundary {
<app-promotional-widget />
} @error (let err) {
<app-default-promo-widget />
}

It lands as a developer preview in Q3 2026. Angular’s MCP devserver tooling (devserver.start, wait_for_build, and friends) also went stable this release.

One thing to flag if you maintain Angular apps: the webpack-based builders (@angular-devkit/build-angular, @ngtools/webpack) are deprecated in v22, with the team focusing on TSGo support in the application builder. Full details are in the official announcement.