Announcing Angular v22

Today, we are thrilled to announce the release of Angular v22. We continue to be proud of the work we do with each release. Our goal is to maintain a high quality stream of features and improvements that make the workflows for developers smooth no matter how they build Angular applications.Angular is the solid foundation upon which you can build what’s next on the web. This release features updates across stability, ergonomics and more. We want Angular to be a sort of launch pad that you can use as you build your next great application.There’s some great features to discuss, so let’s dive in.Production Ready is the Name of the GameOn the Angular team, we take a lot of joy and pride in our ability to update our APIs to bring great new features to Angular. When bringing new features to the table, we typically release a feature as experimental or developer preview. This gives the team time to gather feedback and iterate on new features. During this time, features will undergo refinement with the intention of delivering the best possible version to the community. This is great except that it means some features will not be production ready even though developers are excited and ready to use them immediately. In this release, we’re excited to be bringing 3 significant Angular features to production-ready, stable status: Signal Forms, Angular Aria and the Asynchronous Reactivity APIs.Signal Forms: Composable, Reactive and Ready to goWe designed Signal Forms to be the new, robust forms API. Signal forms combine the best parts of Reactive forms, the value of strongly typed forms, as well as the things developers love about template driven forms and reactivity of signals. We put all of that together to make a reactive, composable and declarative form solution. When we launched Signal Forms in v21, we received strong signals (pun intended) from teams inside and outside of Google that we were on the right track. Since then, we’ve updated Signal Forms by:Adding a complete set of documentation with the updated guide on angular.dev.Addressing a significant amount of feedback and issues submitted by the community.Adding support for Angular Material and Angular Aria giving developers even more options with integrating forms.

Here’s an example of a form implementation with custom validation and template bindings:/** * Getting started with Signal Forms **/import {signal} from "@angular/core"import {form} from "@angular/forms/signals"@Component({ selector: 'app-payment', imports: [FormField], templateURL: './app-payment.html',})class Payment { readonly paymentModel = signal({ paymentType: '', amount: 0 }); readonly f = form(paymentModel, schema => { required(schema.paymentType, { message: 'Required field' }); });}<!-- app-payment.html --><form> <section> <label for="payment-type">Payment Type:</label> <select id="payment-type" [formField]="f.paymentType"> <option value="">Select a method...</option> <option value="credit">Credit Card</option> <option value="paypal">Payment Service</option> </select> @if (f.paymentType().invalid() && f.paymentType().touched()) { <p class="error"> @for (error of f.paymentType().errors(); track error.kind) { <span>{{ error.message }}</span> } </p> } </section> <button type="submit" [disabled]="f().invalid()">Submit Payment</button></form>Signal Forms are ready for production today, head over to the updated guide on angular.dev to get started.Angular Aria: Accessible primitives to build apps for all usersThe web was meant for everyone, regardless of how someone decides to interact with it: keyboard and mouse, screen-reader or some other method. Angular teams have needed a consistent, accessible yet customizable way to build components that enables them to build apps for all users. Angular Aria was a bold step in that direction when we released it in Angular v21. We wanted developers to bring the styles and business logic while the UI directives and patterns handled the accessibility. With that in mind, Angular Aria’s set of accessibility patterns is moving to production in Angular v22. Now, developers can ship their components using Angular Aria to users with confidence.

We’ve been busy preparing it for production, here are some of the updates we’ve made:APIs are stabilized and many community issues have been addressedSignal Forms fully supportedTest harnesses are availableAngular Aria’s twelve UI patterns cover common accessibility patterns and are available to use in production now. Build apps all users can enjoy.Press enter or click to view image in full sizeExample Tree component using Angular AriaAsynchronous Reactivity: a new frontierAt the community driven 2024 NgPoland conference, Angular team member Pawel Kozlowski shared his vision for how we could take the power of signals beyond the synchronous boundaries developers were used to. What came next was the team’s exploration into what would become a game changer for Angular developers: asynchronous signals with resource. The resource API carves a path for developers to leverage the non-blocking nature of asynchronous programming while maintaining the ergonomic niceties of the standard synchronous signal API./** * Code example featuring weather forecasts using resource */import { resource, signal, computed } from '@angular/core';const selectedCity = signal('Chicago');const weatherResource = resource({ params: () => ({ city: selectedCity() }), loader: ({ params }) => fetchWeatherForecast(params.city),});const currentTemperature = computed(() => { if (weatherResource.hasValue()) { return `${weatherResource.value().temperature}°F`; } return 'Loading weather...';});While resource provided a way for developers to request asynchronous resources we wanted to provide a practical application to demonstrate what was possible. As a result, httpResource was introduced as a way to fetch data over HTTP. This new approach made fetching data much more intuitive for developers with a simplified mental model./** * This snippet demonstrates how httpResource enables declarative data fetching by * automatically tracking the selectedCity signal. */export class WeatherComponent { selectedCity = signal('Chicago'); weather = httpResource<{ temperature: number; condition: string }>(() => { return `https://api.example.com/v1/forecast/${this.selectedCity()}`; }); changeCity(newCity: string) { this.selectedCity.set(newCity); }}Both resource and httpResource are ready for production. As of Angular version 22, developers can now use both these APIs in their production apps with confidence knowing that they have been battle-tested and ready to serve your users.

For information on how to get with these powerful apis, visit the official guides on angular.dev.Charting the Agentic FutureAngular is a great choice of platform for AI-native applications. Since the introduction of angular.dev/ai, we’ve been diligently working to expand our AI story in meaningful ways to meet developers at the frontlines of this new era of development. We believe this manifests in three critical ways:Agentic tooling for code authoringAgentic browser toolsAI development platformsThe Angular team has made significant progress in both of these areas and we’re excited to share what we’ve been working on.Agentic tooling for code authoringAs more and more developers use tools like Google’s Antigravity as their agent coding partners it is more important than ever that coding agents have the tools needed to effectively write modern Angular applications.We’ve updated our Model Context Protocol (MCP) offering to include new tools for directly interacting with the development server while building applications.devserver.wait_for_build allows agents to programmatically build the application and review the output for deciding next steps in the development process. For example, the build logs could reveal code errors that need to be revisited. A workflow like this enables self-healing loops for agents.Press enter or click to view image in full sizeAgentic environment asking for permission to use the devserver.wait_for_build MCP toolAngular MCP also features tooling for starting and stopping the development server with devserver.start and devserver.stop, respectively. These tools create new agentic workflows to meet the needs of today’s developers.These tools are all graduating to stable in this release along with the testing and end-to-end tools. Angular MCP features a growing list of tools to help you build modern Angular apps including the ai_tutor, modernize, onpush_zoneless_migration and more. To find out more about all the MCP tools available, check out angular.dev/ai/mcp.Agent Skills for AngularBuilding modern Angular apps with agentsAs the framework evolves, keeping up with the growing API surface can be a challenge not just for developers, but also for AI coding assistants whose training data might not capture the latest patterns. To bridge this gap, we are introducing Angular Agent Skills, a standardized way to give AI agents immediate context and expertise on modern Angular development.These are the first two developer-focused skills:angular-developer: This core skill provides models with critical best practices and guidelines for writing modern Angular applications.

It specifically covers cutting-edge features that standard models may lack deep training on, such as Angular Aria and Signal Forms. Agent skills use progressive disclosure. The file itself is less than 140 lines long, pulling in robust code samples and deep reference files only when the agent actually needs them.angular-new-app: This skill is intended for those exploring Angular for the first time in an agentic environment. This skill guides your AI assistant through configuring a local environment ready for Angular coding.These skills are available to use today in AI development tools like Antigravity or any environment where you run your agentic workflows.Interested in seeing these tools in action? Check out our latest video on YouTube.Skills to help contributorsContributing to a major framework can be intimidating, so we’ve also rolled out a set of Contributor Skills.These skills help explain the internal mental models required to develop features inside the Angular codebase itself. They are incredibly valuable for anyone looking to make their first pull request. We’ve found that even experienced team members discover value in reading through them to better understand the framework architecture.Experimental WebMCPAngular is excited to ship experimental support for WebMCP.WebMCP represents an exciting new opportunity to shape the future of web interactions. It allows you to create and expose structured tools for agents to interact within the browser. Tools defined by an application allow AI assistants to interact with it directly, providing additional capabilities to the agent and reducing the need for DOM interactions.These early iterations include support for defining tools for the entire app, routes, services. It also supports automatically generating tools from dynamic Signal Forms.We’ve shipped docs to share more information about this new integration.AI Development PlatformsThe development community is experiencing an incredible boom in “builders”. These are people who want to bring their ideas to life with software but might not come from a traditional coding background. To support them, we’ve worked closely with the teams behind Google AI Studio and Gemini Canvas to ensure these builders can kick off their projects with the foundational strengths of Angular.Prototype Directly in the BrowserYou can use the built-in coding sandbox in the Gemini web app to create a full application directly in the browser.For example, I recently used it to build an Angular app for my kid’s soccer team to track who is responsible for bringing snacks. By specifying “Angular” in the prompt, the generated app uses Angular.