Angular v22: Signal Forms Go Stable, OnPush Becomes the Default — The Signal Era Matures

"Production Ready Is the Name of the Game"

The Angular team's theme for v22 is straightforward: stop shipping APIs as experiments and start shipping them as the foundations developers can build on with confidence. Three APIs that have been in developer preview or experimental status crossed the finish line in this release.

Three APIs Now Stable for Production

Signal Forms: The New Standard for Angular Form Handling

Signal Forms replace both Reactive Forms and Template-driven Forms with a unified, signal-based approach. The API combines strong TypeScript type safety with the declarative ergonomics of template binding and the fine-grained reactivity of Angular Signals.

import { form } from "@angular/forms/signals";

class Payment {
  readonly paymentModel = signal({ paymentType: '', amount: 0 });
  readonly f = form(paymentModel, schema => {
    required(schema.paymentType, { message: 'Required field' });
  });
}

When a single field changes, only that field's dependents re-evaluate — no unnecessary full-component re-renders. Signal Forms are fully compatible with the existing ControlValueAccessor ecosystem, meaning third-party component libraries require no immediate changes.

Angular Aria: Accessible by Default

Angular Aria's twelve UI accessibility patterns are now stable and production-ready. The package handles all accessibility semantics — keyboard navigation, screen reader announcements, ARIA attributes — while developers focus on styling and business logic. Full integration with Signal Forms means accessibility metadata flows automatically through form state.

resource, rxResource, and httpResource: Declarative Async Data

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

When selectedCity changes, httpResource automatically re-fetches. Loading, error, and data states are managed by the API — no manual RxJS subscriptions required. The new chain() method allows resources to depend on other resources, with the second request automatically waiting for the first to complete.

OnPush Is Now the Default

Starting in v22, all new Angular applications use OnPush change detection by default. This aligns with Zoneless Angular and means performance-optimized change detection applies to every new component without explicit configuration. The old default — ChangeDetectionStrategy.Default — is renamed to ChangeDetectionStrategy.Eager for clarity, and the CLI's migration script handles the rename automatically for existing projects.

New APIs That Improve Day-to-Day Development

The @Service Decorator in Practice

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

@Service()
export class UserStore {
  private users = signal<User[]>([]);
  readonly users$ = this.users.asReadonly();
  
  addUser(user: User) {
    this.users.update(current => [...current, user]);
  }
}

That single @Service() annotation replaces @Injectable({ providedIn: 'root' }) for the vast majority of use cases, making the intent unmistakably clear.

Angular for the Agentic Era

v22 also focuses Angular's AI story. Angular MCP tools — including devserver.wait_for_build, devserver.start, and devserver.stop — are now stable, enabling self-healing loops where AI agents build, observe output, and iterate autonomously. Angular Agent Skills provide AI coding assistants with up-to-date context on modern Angular patterns including Signal Forms and Angular Aria.

Experimental WebMCP support allows Angular apps to expose structured tools directly to AI assistants running in the browser — a forward-looking integration for agentic UI workflows.