Angular 22.0: New features

Official list of changes: https://github.com/angular/angular/releases/tag/V22.0.0
Release date: 2026-06-04

Here is a list of what can be useful in the daily activity of a developer.
Compiler improvement and bug fixes are not included.

Template Ergonomics and Control Flow Evolution

Angular's control flow syntax receives significant usability refinements aimed at reducing structural boilerplate
and reinforcing compile-time safety constraints inside templates.

Multi-case matching in switch blocks

Templates now natively support multi-condition matching inside a single @case block, eliminating the historic limitation where developers were forced to stack identical structural elements or duplicate presentation markup.

Example:

<header class="admin-header">
  @switch (currentUser().securityRole) {
    @case ('SuperAdmin', 'GlobalDirector', 'RegionalManager') {
      <app-management-console [permissions]="currentUser().scopes" />
      <button (click)="launchAuditLog()">View compliance logs</button>
    }
    @case ('DepartmentLead', 'Editor') {
      <app-content-editor [workspaceId]="currentWorkspaceId()" />
    }
    @case ('Guest', 'Anonymous') {
      <app-read-only-banner />
      <a href="/auth/login">Request elevated access</a>
    }
  }
</header>

GitHub Issue #14659, building upon the architectural paradigms initialized in the Built-In Control Flow RFC (Discussion #50719).

Exhaustive compile-time type checking (default never)

To implement strict mathematical exhaustiveness checks against TypeScript union types, developers can now pair @switch blocks with a default never handling case.
If an engineer expands a business-critical type union in the model but forgets to address it inside the HTML presentation template, the Angular compiler will throw a terminal build error immediately.

Example Part 1 (Type Definition):

export type SubscriptionTier = 'Free' | 'Premium' | 'Enterprise' | 'LegacyTrial';

Example Part 2 (Template Validation):

<div class="billing-card">
  <h3>Subscription management</h3>
  @switch (account().tier) {
    @case ('Free') {
      <p>Your account is on the standard free tier.</p>
      <button class="btn-upgrade">Upgrade to premium</button>
    }
    @case ('Premium') {
      <p>Thank you for subscribing! Next renewal: {{ renewalDate() }}</p>
    }
    @case ('Enterprise') {
      <p>SLA tier: 99.99% availability. Dedicated account rep active.</p>
    }
    @default never {
      <!-- Structural compile-time type guard block -->
    }
  }
</div>

GitHub tracking: The discussion, design criteria, and testing details for this compilation feature are logged under GitHub Issue #52107 (https://github.com/angular/angular/issues/52107).

Inline arrow functions

Angular v22 introduces syntax allowing localized, compact inline arrow functions directly in element property and event expressions. This mitigates trivial class clutter for simple signal mutations or quick layout mutations, while architectural separation rules still mandate that long-form business logic remains in the component file.

Example:

<div class="filter-actions">
  <button 
    [class.active]="displayMode() === 'grid'"
    (click)="() => displayMode.set('grid')">
    Grid view
  </button>
  <button 
    [class.active]="displayMode() === 'table'"
    (click)="() => displayMode.set('table')">
    Detailed list
  </button>
  <input 
    type="checkbox" 
    [checked]="isMuted()" 
    (change)="($event) => isMuted.set($event.target.checked)" />
  <label>Silence system alerts</label>
</div>

API transitions to production-ready stability

Several foundational experimental features have successfully graduated to stable status, providing concrete design paradigms with permanent API configurations.

Asynchronous data signals (resource / httpResource)

The state-management ecosystem officially transitions resource, rxResource, and httpResource out of experimental status.
This collection establishes the declarative, native architecture for handling remote network requests directly as signal streams, displacing manual RxJS lifecycle subscription management or component-level lifecycle hooks.

Example component implementation:

import { Component, signal, resource } from '@angular/core';

@Component({
selector: 'app-product-details',
template: `
    <div class="container">
      @if (productQuery.isLoading()) {
        <app-loading-spinner />
      } @else if (productQuery.error()) {
        <div class="alert alert-danger">Error: {{ productQuery.error() }}</div>
      } @else if (productQuery.value()) {
        <div class="product-profile">
          <h2>{{ productQuery.value()?.name }}</h2>
          <p>Price: \${{ productQuery.value()?.price }}</p>
          <span [class.out-of-stock]="productQuery.value()?.inventoryCount === 0">
            Stock status: {{ productQuery.value()?.inventoryCount }} remaining
          </span>
        </div>
      }
    </div>
  `
})
export class ProductDetailsComponent {
productId = signal<string>('prod_98745');

productQuery = resource<ProductPayload, { id: string }>({
  request: () => ({ id: this.productId() }),
  loader: async ({ request, abortSignal }) => {
    const response = await fetch(`/api/v2/inventory/${request.id}`, { signal: abortSignal });
    if (!response.ok) {
      throw new Error('Failed to retrieve inventory records.');
    }
   return response.json();
  }
 });
}

Signal forms architecture

Combining the immutable paradigms of Reactive Forms and the local ergonomics of Template-Driven Forms, Signal Forms are officially stable.
Featuring full styling integration for Angular Material, rigorous accessibility alignments (Angular Aria), and dedicated signalFormControl abstractions to seamlessly wrap legacy elements, this architecture supports production-ready web interfaces.

Example component implementation:

import { Component } from '@angular/core';
import { SignalFormGroup, SignalFormControl, Validators } from '@angular/forms';

@Component({
selector: 'app-user-registration',
template: `
    <form [formGroup]="registrationForm" (ngSubmit)="handleFormSubmission()">
      <div class="form-field">
        <label for="email">Corporate email address</label>
        <input id="email" type="email" [formControl]="registrationForm.controls.email" />
        @if (registrationForm.controls.email.touched() && registrationForm.controls.email.errors()?.['required']) {
          <small class="error-text">Email field is mandatory.</small>
        }
      </div>
      <div class="form-field">
        <label for="password">Password</label>
        <input id="password" type="password" [formControl]="registrationForm.controls.password" />
      </div>
      <button type="submit" [disabled]="registrationForm.invalid()">
        Register enterprise account
      </button>
    </form>
  `
})
export class UserRegistrationComponent {
  registrationForm = new SignalFormGroup({
    email: new SignalFormControl('', [Validators.required, Validators.email]),
    password: new SignalFormControl('', [Validators.required, Validators.minLength(8)])
});

handleFormSubmission(): void {
    if (this.registrationForm.valid()) {
      const payload = this.registrationForm.value();
      console.log('Dispatching dynamic user payload:', payload);
  }
 }
}

Structural and modern framework defaults

Version 22 intentionally changes the default configuration suite for new projects to drive performant design patterns out of the box.

• OnPush by default: Every new component generated via CLI structures defaults to ChangeDetectionStrategy.OnPush. Upgraded applications receive an automated script migrating existing inputs directly to Signals to smooth the transition towards high-performance, zoneless change evaluation cycles.
• Modern network transports: The runtime architecture drops ancient XMLHttpRequest (XHR) dependencies in favor of modern standard Fetch API backends as the global default for HTTP operations.
• Strict checking infrastructure: Powered by internal TypeScript 6.0 integrations, strict typing configurations and complete layout compilation safety flags are initialized globally upon app creation.

AI AI AI

Recognizing the massive shift toward AI-assisted software generation, Angular becomes the first web platform to formalize specifications for artificial intelligence integration via automated tools and Large Language Models.

Model context protocol (Angular MCP)

The framework introduces an enhanced MCP Server, exposing strict tooling interfaces directly to AI agents. Models gain structural, programmatic capability to orchestrate the dev environment: initiating compilations, evaluating dependency structures, listening to errors, and halting server execution safely during code generation loops.

Standardized AI skills

Hosted natively within the open-source registry github.com/angular/skills (https://github.com/angular/skills), these localized definition schemas map deep architectural guidelines directly into prompt layers to guide code-generation agents away from deprecated API patterns.

• The Angular developer skill: Under 140 lines of contextually isolated guidelines that instantly update LLM comprehension regarding stable Signal Forms, @boundary syntax, and Angular Aria configurations, bypassing outdated pre-2025 training data limitations.
• The Angular new app skill: A contextual module empowering automation agents to programmatically scaffold, configure, and bootstrap custom workspaces using proper architecture definitions.