Announcing Angular v21

Authors: Jens Kuehlers, Mark “Techson” Thompson

What an exciting time to be a developer! With all the exciting developments in AI in Web development, it feels like we’re going on a new adventure every day. This is perfectly in line with the theme of our v21 Release Event that gives a high level overview of the best of what Angular v21 has to offer.

With the release of v21, Angular is an even greater partner for your daily adventures — giving you the stability of the Angular framework while enabling you to build great AI-powered applications that are scalable and accessible for everyone.

Angular v21 gives you many long-awaited tools to add to your toolbox and ensures you have the best developer experience, whether you code using agents and AI assistance or prefer to write, debug and test code with just you and your IDE.

Some of the highlights:

• We’re launching experimental Signal Forms, providing a new scalable, composable and reactive forms experience built on Signals.
• Angular Aria is launching in Developer Preview, providing you headless components built with accessibility as a priority, that you can style your way
• Your AI agents can use Angular’s MCP Server, now with seven stable and experimental tools — allowing LLMs to use new Angular features from day one
• The Angular CLI integrates Vitest as the new default test runner. Vitest support is now stable and production ready.
• New Angular applications are not including zone.js by default anymore!

And there’s so much more — so let’s dig right in!

Experimental Signal Forms are here

We’re proud to announce that you can now try out Signal Forms, an experimental library that allows you to manage form state by building on the reactive foundations of Signals!

With Signal Forms, the Form model is defined by a signal that automatically syncs with the form fields bound to it, allowing for an ergonomic developer experience with full type-safety for accessing form fields. Powerful and centralized schema-based validation logic is built in 🎉

To get started, create a form model and pass it to form():

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);
}

You can now bind the fields to the template using the [field] directive. Typical validation patterns such as email validation or regular expression matching are already built-in, and custom validators give you the ability to create even more powerful validation mechanisms.

Binding to custom components is signal based and easier than ever, there’s no more need for ControlValueAccessor.

To get started check out the essential Signal Forms guide or the full documentation.

We’re excited for you to start building with Signal Forms. The Signal Forms API is still experimental and we will be iterating based on feedback. Please try it and let us know what you think.

Accessible Components — your style, with Angular Aria

We’re thrilled to announce we’re launching a developer preview of our new modern library for common UI patterns. We built Angular Aria with accessibility as its number one priority. To start you have access to a set of 8 UI patterns encompassing 13 components that are completely unstyled and can be customized with your own styles.

Angular Aria uses modern Angular directives, is signal based, and builds on our team’s strong experience in building responsive accessible components.

The 8 patterns we are launching with are:

• Accordion
• Combobox
• Grid
• Listbox
• Menu
• Tabs
• Toolbar
• Tree

Angular Aria includes complex components that you can style yourself, such as multi-level standalone menus

Install this new library by running npm i @angular/aria. Then, head over to our complete Angular Aria guide that gives you usage information and code examples for all components and a showcase of skins that you can copy and paste to try out different looks.

The Angular team now offers three different ways to help you in using and developing components:

• Use Angular Aria for accessible, headless components that you are able to style yourself however you want
• Use the CDK for behavior primitives such as Drag and Drop that you can include in your own, custom-built components.
• Use Angular Material for a full library of readily styled, opinionated components following Material Design principles. You can customize the components by using your own theming.

We’re excited about your feedback on Angular Aria and what you will build with it.

More tools for your AI agents — with Angular’s MCP server

To make sure you’re ready for the AI era, we want to ensure that developers have the right tools. We want to provide tools for the way developers work now and how and how work will evolve.

In v20.2 we launched the MCP server built in the Angular CLI to ensure AI agents have all the context they need for Angular development and we’re proud to announce that the MCP server is now stable!

The Angular MCP server gives you a set of tools to give AI agents the right context about modern Angular and your application, and even help you become a better developer. You can use the MCP server to:

• Gain general context: The get_best_practices tool provides the Angular best practices guide and the list_projects tool finds all the Angular projects in your workspace.
• Find up-to-date information: The search_documentation tool is able to answer Angular questions by querying the official documentation and the find_examples tool provides access to up-to-date examples of modern Angular patterns — we’ll soon add more examples such as Signal based forms and Angular Aria so your AI agents can use the new coding patterns.
• Update your application: The onpush_zoneless_migration tool is able to analyze your code and provide a plan to migrate your application to OnPush and zoneless change detection. There’s also an experimental tool called modernize to perform code migrations using existing schematics.
• Teach you Angular: The ai_tutor tool launches an interactive AI-powered Angular tutor that can help you learn concepts and get feedback and should be used with a new Angular application.

With the MCP server you are able to bridge the knowledge cutoff issue — your LLM was trained with Angular knowledge as of a specific date, but using the MCP server, it can learn to use even brand new features such as Signal Forms and Angular Aria — you just need to ask your agent to find examples and use them!

AI tutor tool in action

Vitest as the new default, stable test runner

Since Karma was deprecated in 2023 the Angular team has explored Jest, Web Test Runner and Vitest as new testing solutions.

After getting positive feedback from the community we decided on Vitest as our new default test runner, and are promoting it to stable in Angular v21 🎉

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

Sample terminal output from Vitest in Angular

To learn more about testing with Vitest — checkout the documentation on angular.dev.

While Vitest is the new default test runner for new projects, Karma and Jasmine are still fully supported by the Angular team, so you don’t need to migrate yet.

If you’re ready to migrate your existing application to use Vitest, there’s an experimental migration you can run. After performing some preparatory steps described in the linked guide run

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

Your tests will be automatically refactored to use Vitest.

Get Angular’s stories in your inbox

Join Medium for free to get updates from this writer.

With Vitest support being stable we decided to deprecate the experimental support for Web Test Runner and Jest and plan to remove them in v22. For teams that want to continue to use Jest, consider one of the existing community alternatives such as jest-preset-angular and the Nx Jest plugin.

Zoneless is ready for prime-time

Angular traditionally used zone.js, a library that patches browser APIs, to keep track of changes in applications. This enabled the “magical” experience where templates automatically change as the user performs actions in your application, however zone.js has performance drawbacks, especially for high-complexity applications

With signals driving modern Angular state management, zone.js is no longer needed for change detection. Zoneless change detection, introduced experimentally in v18, progressed through Developer Preview in v20, and reached stability in v20.2.

Through our experience with applications in Google we became increasingly more confident that new Angular applications work best without zone.js.

• In 2024, more than half of the brand new Angular applications inside Google were built with the Zoneless change detection strategy and we made it the default mid-2024.
• There’s hundreds of zoneless applications running inside Google in production now.
• Externally, looking at The HTTP Archive, we see over 1400 Angular applications using zoneless change detection, and that’s only the applications that are publicly available without the need of a login.

Given these strong signals, zone.js and its features will no longer be included by default in Angular applications in v21.

Enabling Zoneless change detection provides benefits such as better Core Web Vitals, native async-await, ecosystem compatibility, reduced bundle size, easier debugging and better control.

New applications will automatically use Zoneless, for existing applications please follow our migration instructions on angular.dev. You can also try out the new onpush_zoneless_migration tool in the Angular MCP server, which creates a step-by-step plan on how to migrate your application to OnPush change detection strategy.

While Zoneless is the new default experience, we want to acknowledge that zone.js played an important role in shaping Angular and allowed developers to create magical experiences for many years. We want to extend a big THANK YOU to the zone.js team, especially Jia Li for contributions to zone.js.

A new documentation experience

If you visited angular.dev in the last few weeks, you might have noticed that there is a new landing page. But that’s not all that’s changed on angular.dev — we’ve made significant changes to ensure the documentation experience is modern and teaches the latest concepts so you can always get fresh information.

At Google I/O 2025 we launched angular.dev/ai — your resource for everything you need to build AI-powered applications with Angular. We’ve included best practices, code samples, design patterns, and more. We’ve even included best practices prompts and custom rule files to help ensure your code generation experiences result in modern Angular code. We have been landing lots of updates so please keep checking back for the latest tips and tricks on how to build AI-powered applications and make use of the best AI assisted coding strategies.

If you’re at the beginning of your journey in building reactive applications, check out the new Signals tutorial which provides a complete overview of all the stable Signal APIs, including model(), linkedSignal() and more.

We’ve invested a significant amount of effort into updating our developer guides on angular.dev:

• The Routing documentation has been completely overhauled and provides detailed information about all aspects of routing.
• The dependency injection guides have been greatly improved and made more accessible to developers wanting to grasp the core concepts behind this powerful feature.
• We’ve added a comprehensive guide on approaches for theming Material components.
• And last but not least there’s a complete guide on how to use Angular with Tailwind CSS!

We’re committed to improving our documentation experience. For developers using the Angular MCP server, the new search_documentation tool gives your AI agent access to the latest and greatest information on angular.dev.

And so much more …

We’ve been busy! Apart from the great features that we highlighted so far, there’s quite a few more things our team delivered that deserve a special mention:

• CLDR library support has been updated from v41 to v47, improving currency formatting, date formatting, etc.
• We now support regular expressions in templates:

@let isValidNumber = /\d+/.test(someValue);

@if (!isValidNumber) {
  <p>{{someValue}} is not a valid number!</p>
}

• Angular now has a built-in Signals formatter. Enable custom formatters (Chrome, Firefox) to use this feature.

• You can now customize the IntersectionObserver options for @defer triggers related to on viewport, for example:

@defer (on viewport({trigger, rootMargin: '100px'}) {
  <section>Content</section>
}

• SimpleChanges are now generic allowing for better type checking of the values inside SimpleChanges, solving a highly-upvoted issue
• The KeyValue pipe now supports objects with optional keys
• As an alternative to CSS variables, you can now use a new set of utility classes to apply Material Design’s system tokens directly in your templates. See the theming guide for details!
• CDK overlays now use browsers built-in popovers, helping to solve some accessibility issues

And in case you missed it — these are only the updates since Angular v20.2. If you only tune in every major release you might have missed:

• New APIs to Animate elements as they enter and leave the DOM
• CDK Drag&Drop improvement to allow copying items between lists
• Route visualization and signal graph in Angular DevTools
• and so much more — see our Summer Update blog post for details

And as always, the full list of changes is in our Changelog.

Angular ♥️ our amazing community

This amazing release wouldn’t have been possible without our open-source community. So many people in our community help move Angular forward, through contributions big and small, be it answering questions to other developers, organizing meetups and conferences, improving documentation or by contributing with a pull-request. If you are one of our contributors — thank you so much! If not yet, I hope this can inspire you! Even answering one question or helping your co-worker helps!!

Since v20, 215 people have contributed to the Angular codebase, and we want to highlight some specific contributions:

• Jaime Burgos improved multiple migrations and diagnostics:
  • The standalone migration now has CommonModule support
  • A new migration for the deprecated RouterTestingModule
  • A diagnostic for unreachable or redundant @defer triggers
• Angelo Parziale created two migrations:
  • Convert NgClass directive to class bindings
  • Convert NgStyle directive to style bindings
• Hryhorii Avcharov added a Transfer State tab to DevTools allowing to inspect the TransferState between server side and client side application.
• Luke Beach created a CDK overlay feature allowing separate viewport margins on each side
• Ruslan Lekhman created a pull request to allow an injector to be passed to MatBottomSheetConfig
• Cédric Exbrayat contributed an option named outputFile to the Vitest runner
• Younes Jaaidi contributed multiple improvements to the Vitest runner

Thank you so much for being part of Angular v21!

Mascot update!

You might remember we asked you for your input on Angular’s mascot in v20! Our Mascot RFC had a record number of submissions and we owe you an update. We know you want to meet our new mascot so make sure to watch our release event on YouTube November 20th, 2025 at 9 AM Pacific for the official announcement ⭐

Time to build the next wave of apps

We’re incredibly proud of this release, but this is only one step in Angular’s journey. We have our eyes keenly focused on the emerging patterns for the future of web application development. We’ve seen the power of AI and we want to do what we can to bring you the tools for however you work. Whether that be with vibe-coding, AI agents or tradition development.

Our newest features like Signal Forms and Angular Aria are signs of our commitment to continue to improve the API surface and make Angular a wonderful place for building scalable web applications with confidence.

Be sure to run ng update and create apps your users will love.