Angular version 21 — Everything you need to know

#webdev #programming #ai #angular

1. Signal Forms (Experimental) - Finally, Reactive Forms Done Right

Forms have always been a pain point. Angular 21 answers that with Signal Forms, a new experimental API built directly on top of Signals.
You define your form with a signal. Angular automatically syncs between the UI and your model - with full type-safety and clean validation.

import { form, Field } from '@angular/forms/signals';

@Component({
    imports: [Field],
    template: `
        Email: <input [field]="loginForm.email">
        Password: <input [field]="loginForm.password">
    `
})

export class LoginForm {
    login = signal({
        email: '',
        password: '',
    });

    loginForm = form(this.login);
}

🔗 Learn more: https://angular.dev/essentials/signal-forms

Signal Forms are still experimental, but they're powerful - and they'll likely become the future of Angular forms.

2. Angular Aria (Developer Preview) - Headless, Accessible UI Components

Angular now ships with Angular Aria, a headless UI library focused entirely on accessibility.

What is Angular Aria ?
Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support. All you have to do is provide the HTML structure, CSS styling, and business logic!

The initial release includes 8 patterns - Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree - totaling 13 components.

This gives developers full flexibility while following WCAG-compliant patterns out of the box.

🔗 Learn more: https://angular.dev/guide/aria/overview

3. MCP Server Goes Stable - AI-Ready Angular Development

Angular wants to play nicely with AI agents, so the MCP (Model Context Protocol) server is now stable.

It gives your AI tools access to:

Angular best practices
Workspace project discovery
Documentation search
Modern examples
Zoneless + OnPush migration planning
Interactive AI tutor for learning Angular

🔗 Learn more: https://angular.dev/ai/mcp

This closes the knowledge-cutoff gap - meaning AI can assist with brand-new Angular features like Signals, Signal Forms, and Angular Aria from day one.

4. Vitest Is Now the Default Test Runner

Angular 21 makes Vitest the default and stable test runner. Personally my favorite think in the release.

Faster startup, instant watch mode, better DX.If you're on an older Angular project, there's an experimental migration:

ng g @schematics/angular:refactor-jasmine-vitest

Jest and Web Test Runner support have been deprecated and will be removed in v22.

To use Vitest in a new Angular application just run the ng test command. The console output will look like this:

🔗 Learn more: https://angular.dev/guide/testing

5. Zoneless Change Detection Is Now the Default

Zone.js is no longer included in new Angular projects. Finnally!
Signals made it unnecessary - and the performance gains speak for themselves.

Benefits include:

Better Core Web Vitals
Smaller bundles
No monkey-patching
Cleaner debugging
More predictable async behavior

Thousands of production apps (including inside Google) already run zoneless without issues.

🔗 Learn more: https://www.npmjs.com/package/zone.js?activeTab=readme

6. Documentation Overhaul - With a New AI Section

The Angular team didn't just add features - they rebuilt the doc experience.

New or refreshed guides include:

Full routing overhaul
Improved dependency injection explanations
Tailwind CSS guide
Material theming
A complete Signals tutorial angular.dev/ai - dedicated AI app development resources

The docs are now aligned with modern Angular, not the Angular of 2016.

🔗 Take a look: https://angular.dev/

7. Regular expressions in templates

Angular now support regular expressions in templates:

@let isValidNumber = /\d+/.test(someValue);
@if (!isValidNumber) {
  <p>{{someValue}} is not a valid number!</p>
}

🔗 Learn more: https://github.com/angular/angular/pull/63857

8. Other Noteworthy Improvements

A few more upgrades worth mentioning:

(better currency/date formatting)
New built-in Signals formatter for debugging
Customizable IntersectionObserver options for @defer
SimpleChanges is now generic (finally!)
Optional keys supported by KeyValue pipe
New Material Design utility classes as an alternative to CSS variables
CDK overlays built on native popovers
Ton of smaller stability, performance, and accessibility improvements

A Strong Foundation for the Future

The framework is clearly moving toward a cleaner, signal-driven future with less magic and more control - without abandoning the stability teams rely on.
If you haven't upgraded yet, now's the time.
Run: ng update
And start building apps your users - and your future self - will appreciate.

Buy my new book and master the React.js Interviews

After the success of my first book for junior developers - a success I honestly didn't expect - it's time for the next step. This book is written for experienced React developers who are ready to level up and tackle real-world challenges and help you with topics hard to find.