Sometimes the best way to learn is to dive straight into the code! This week, we’re highlighting several hands-on repositories that demonstrate the latest Angular patterns and how to integrate Google Gemini for real-time user assistance.

Check out these essential code samples and templates.

Advanced Dynamic Component Creation

Antonio Cardenas @yeoudev provides a masterclass in using ViewContainerRef. This repository and StackBlitz demo show you exactly how to handle dynamic component instantiation in a clean, scalable way.

• Explore the code: https://github.com/AntonioCardenas/ngviewcontainerref
• Try the demo: https://stackblitz.com/~/github.com/AntonioCardenas/ngviewcontainerref

Angular Vibe Coding: The Ultimate CRUD Template

Need to start a project fast? Antonio Cardenas @yeoudev offers a “Vibe Coding” template that comes ready with basic CRUD functionality and helpful scripts to clean up boilerplate, letting you focus on your unique logic.

• Grab the template: https://github.com/AntonioCardenas/angularvibecoding

Mastering httpResource with Pirates

Deborah Kurata @deborahkurata brings her signature clarity to the new Signal-based httpResource. This fun “Pirates” example demonstrates how to fetch and manage data using the newest reactive primitives in Angular.

• Check out the examples: https://github.com/DeborahK/angular-http-resource-pirates

Build an AI-Powered Grammar Assistant

Ankit Sharma @ankitsharma_007 shows the power of the Google Gemini API in a lightweight Angular app. This project provides real-time grammar corrections as you type — a perfect blueprint for adding AI utility to your own editors.

• See the AI writer: https://github.com/AnkitSharma-007/angular-gemini-writing-assistant

Have you built a cool helper tool with Gemini or tried the new httpResource? Your code samples could be the missing piece for another developer!

Keep the community growing! Use #AngularSparkles and #AngularAI to share your latest GitHub repos and StackBlitz demos!

Mastering Dynamic Components, HTTP Resources, and AI Writing Assistants 🛠️ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Angular ecosystem is expanding beyond the browser’s traditional limits! From running AI models locally to migrating your entire test suite to Vitest, our community experts are leading the charge into a more performant future.

Check out these latest deep dives:

Why the Frontend Should Run AI Models Locally with ONNX

Sonu Kapoor @SonuKapoor1978 explores a fascinating shift in architecture: bringing AI directly to the client. Learn how to run AI models locally using ONNX and Angular for better privacy and lower latency.

• Read the article: https://thenewstack.io/why-the-frontend-should-run-ai-models-locally-with-onnx/

Signal Forms: Smarter Inputs and Reactive Routing

In this real-world guide, Sonu Kapoor @SonuKapoor1978 breaks down how to use Angular Signals to create highly responsive inputs and manage complex routing states with ease.

• Check out the deep dive: https://www.codemag.com/Article/2511041/Angular-Signals-in-the-Real-World-Smarter-Inputs-and-Reactive-Routing

Angular Signals: A Recap of the Framework’s Evolution

Fanis Prodromou @prodromouf provides a comprehensive retrospective and look-ahead. See how far Signals have come and how they continue to redefine the core DNA of Angular development.

• Watch the video: https://youtu.be/MSGYnc83UJY

Signal Forms: Custom Controls (French)

Kevin Davila @kevindaviladev continues his expert series on the newest version of Angular. This installment focuses on building Custom Form Controls specifically designed for the Signal Forms API.

• Read the blog (French): https://www.codeabien.com/blog/angular-signals-recap

Vitest in Angular 21: What’s New and How to Migrate? (German & English)

Johannes Hoppe @JohannesHoppe provides the ultimate guide to switching your testing environment. Whether you are reading in German or English, learn why Vitest is the new standard and how to migrate your code samples.

• Read the German guide: https://angular-buch.com/blog/2025-11-zu-vitest-migrieren Read the English guide: https://angular.schule/blog/2025-11-migrate-to-vitest

Are you planning a migration to Vitest or experimenting with local AI? Your insights could help a fellow developer make the leap.

Keep the momentum going! Use #AngularSparkles and #Vitest to share your migration tips and project wins 👇

Local AI, Reactive Routing, and the Vitest Migration! ⚡ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The way we build with Angular continues to evolve. From AI agents helping us write code to smarter performance patterns, our community experts are documenting every step of this evolution.

Get up to speed with these essential resources:

Stop Writing Outdated Angular Code: MCP, Cursor & Claude

Daniel Herrera Sanchez (@weincoder) explores how to revolutionize your development environment. Learn how to set up the Model Context Protocol (MCP) with Cursor and Claude to write cleaner, modern Angular code automatically.

Read the guide: https://www.linkedin.com/pulse/vistas-diferidas-en-angular-defer-mejora-de-paso-herrera-sanchez-w77ke/

Deferred Views (@defer): Step-by-Step Performance

Boost your Core Web Vitals! Daniel Herrera Sanchez (@weincoder) provides a practical tutorial on using the @defer syntax to load components only when they are needed, significantly improving your app’s initial load time.

Watch the tutorial: https://www.youtube.com/watch?v=ulwxxNZ6Vpo&t=76s

Angular 21 MCP: 7 Tools You Should Know

Alisa Duncan breaks down the essential MCP toolkit for Angular 21. Discover 5 stable tools to use today and 2 experimental ones that represent the future of AI-assisted coding.

Explore the tools: https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

A Quick Vibe Code Experiment with Angular’s MCP Server

Damian Sire (@damiansire) takes a creative look at the Angular MCP Server, experimenting with “Vibe Coding” to see how AI can understand and generate complex Angular patterns through simple context.

Check out the experiment: https://dev.to/damiansiredev/evolution-in-form-validators-goodbye-customerror-hello-plain-objects-4c35

Evolution in Form Validators: Goodbye customError

Modeste ASSIONGBON (@rblmdst) highlights a significant clean-up in form logic in this post. Learn how the transition to plain objects for validators makes your code more readable and easier to maintain.

Watch the update: https://youtu.be/452hcBDOv2w

The Next Generation: A Practical Guide to Signal Forms

Ready to move past traditional forms? Modeste ASSIONGBON (@rblmdst) provides a hands-on guide to Signal Forms, showing you how to implement the most reactive form state management Angular has ever seen.

Watch the practical guide: https://youtu.be/6yWfwir-pX8

Are you using AI agents or MCP in your daily Angular workflow yet? We’d love to see the prompts or tools that are saving you the most time!

Share the innovation and help others modernize their dev stack 👇

Modernize Your Workflow: AI Tooling, Deferrable Views, and the Era of Forms! 🛠️ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

We’ve released security updates to address two SSR vulnerabilities that we were made aware of and have since submitted committed code changes to fix.

The two patched vulnerabilities are:

• SSRF and Header Injection in Angular SSR
• Open Redirect via X-Forwarded-Prefix in Angular SSR

We recommend all developers update their SSR applications to the latest patch version as soon as possible. If an app does not deploy SSR to production, there is no immediate need to update, however we generally recommend staying on the latest supported patch versions as much as possible.

SSRF and Header Injection in Angular SSR

A Server-Side Request Forgery (SSRF) vulnerability was identified in the Angular SSR request handling pipeline. Angular’s internal URL reconstruction logic incorrectly trusted user-controlled HTTP headers, specifically the Host and X-Forwarded-* family to determine the application’s base origin without any validation of the destination domain.

To update your project, please find the patched version from the table on the report page and run

ng update @angular/ssr@<patched-version>`

For more information including affected versions and patch information, please refer to the CVE report on GitHub.

Workarounds

Any developers on an unsupported version of Angular or unable to quickly update should consider:

• Using Absolute URLs: Avoid using req.headers for URL construction. Instead, use trusted variables for your base API paths.
• Implementing Strict Header Validation (Middleware): Implement a middleware in your server.ts to enforce numeric ports and validated hostnames.

const ALLOWED_HOSTS = new Set(['your-domain.com']);

app.use((req, res, next) => {
  const hostHeader = (req.headers['x-forwarded-host'] ?? req.headers['host'])?.toString();
  const portHeader = req.headers['x-forwarded-port']?.toString();

  if (hostHeader) {
    const hostname = hostHeader.split(':')[0];
    // Reject if hostname contains path separators or is not in allowlist
    if (/^[a-z0-9.:-]+$/i.test(hostname) || 
       (!ALLOWED_HOSTS.has(hostname) && hostname !== 'localhost')) {
      return res.status(400).send('Invalid Hostname');
    }
  }

  // Ensure port is strictly numeric if provided
  if (portHeader && !/^\d+$/.test(portHeader)) {
    return res.status(400).send('Invalid Port');
  }

  next();
});

Open Redirect via X-Forwarded-Prefix in Angular SSR

An Open Redirect vulnerability was identified in internal URL processing logic in Angular SSR. The logic normalized URL segments by stripping leading slashes; however, it only removed a single leading slash.

If Angular SSR application is deployed behind a proxy that accepted the X-Forwarded-Prefix header, an attacker can provide a value starting with three slashes (e.g., ///evil.com), causing a redirect to an attacker-controlled origin and could potentially poison any cached responses shared across multiple users.

To update your project, please find the patched version from the table on the report page and run

ng update @angular/ssr@<patched-version>

For more information, please refer to the report on GitHub.

Workarounds

Any developers on an unsupported version of Angular or unable to quickly update should consider sanitizing the X-Forwarded-Prefix header in their server.ts before the Angular engine processes the request:

app.use((req, res, next) => {
  const prefix = req.headers['x-forwarded-prefix']?.trim();
  if (prefix) {
    // Sanitize by removing all leading slashes
    req.headers['x-forwarded-prefix'] = prefix.replace(/^[/\\]+/, '/');
  }
  next();
});

Conclusion

We appreciate working with such bright security researchers who share our passion to keep the web secure everywhere. We participate in Google’s VRP (vulnerability rewards program) to encourage responsible disclosure of issues like these. We strongly recommend keeping critical infrastructure up-to-date to ensure security patches are applied and deployed in a timely manner.

Security Advisory: Addressing Recent Vulnerabilities in Angular was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The momentum in the Angular world is unstoppable! With last year’s release of Angular 21, our community experts are already breaking down the new features, exploring the “magic” under the hood, and showing us how to build more accessible, modern applications.

Check out this week’s expert-led resources below.

Use Gemini CLI and Angular MCP to Build a Page

Alejandro Cuba Ruiz (@zorphdark) & Jorge Cano (@jorgeucano) demonstrate the power of the new Model Context Protocol (MCP). Learn how to combine the Gemini CLI with Angular to scaffold and build pages faster than ever before.

• Watch & Read: https://youtu.be/ThK58diiUyA

Angular Signal Forms: A First Look at the New Forms API

Explore Angular’s new Signal Forms in version 21! Deborah Kurata (@deborahkurata) demonstrates building forms with signals, including validation using a schema. Learn how a form’s field tree mirrors the signal structure, enabling real-time reactivity and error handling.

• Video: https://www.youtube.com/watch?v=J0pVA4lJMso

Angular 21 is Here! (English & German)

Ferdinand Malcher (@fmalcher01), Johannes Hoppe (@johanneshoppe) & Danny Koppenhagen provide a comprehensive overview of the Angular 21 launch. Whether you prefer your updates in English or German, they have you covered with the key highlights of this milestone release.

• English version: https://angular.schule/blog/2025-11-angular21
• German version: https://angular-buch.com/blog/2025-11-angular21

Angular ARIA & Signals Course (Spanish)

Carlos Caballero (@carlillo) is making the web more inclusive and reactive! Dive into his specialized series on Angular ARIA for accessibility, or start his complete course on Signals — all in Spanish.

• Angular ARIA: https://www.youtube.com/watch?v=rr0AstaFLV8
• Signals Course: https://www.youtube.com/watch?v=XXgQudcmlDQ

Stop Writing Outdated Code: Modern Angular Course (Spanish)

Arcadio Quintero (@oidacra) challenges you to modernize your workflow! This guide covers setting up MCP with Cursor and Claude Code to ensure you are writing cutting-edge, high-performance Angular.

Level up your code: https://arcadioquintero.com/stop-writing-outdated-angular-code-mcp-setup-with-cursor-and-claude-code

Which new features have you already implemented? Whether it’s a minor tweak or a major refactor, share your progress with us and help the community stay current. Use #AngularSparkles to share what you’re learning today.

Angular 21: Internal Mechanics, ARIA, and AI-Powered Coding! 🚀 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Angular community is truly global! This week’s roundup features cutting-edge AI integrations and essential deep dives into the newest features of Angular v20, with contributions in multiple languages to help developers everywhere level up.

Check out these latest highlights:

GenAI Scaffold: A Blueprint for Modern Apps

Damian Sire (@damiansire) provides a comprehensive code sample and repository that serves as a blueprint for high-performance apps. It features a cutting-edge stack: Angular, Node.js, and Google Gemini API.

Explore the scaffold: https://github.com/damiansire/GenAI-Scaffold

Nova Reel: AI-Powered Movie & TV Recommendations

Wayne Gakuo (@wayne_gakuo) showcases how to combine Angular, Genkit, and Firebase to build a smart recommendation engine. A perfect example of Gemini’s multimodal power in action!

Check the code: https://github.com/waynegakuo/nova-reel

The Future of Angular and AI (Spanish)

Alejandro Cuba Ruiz (@zorphdark) sits down with Mark Techson to discuss the intersection of Angular and Artificial Intelligence. Essential viewing for our Spanish-speaking community members!

Watch the interview: https://youtu.be/GoPtZ9-RKCY

Angular’s Resource APIs: Let’s Fix Them!

Johannes Hoppe (@johanneshoppe) takes a critical look at the current state of Resource APIs, offering a thought-provoking perspective on what needs to change for better developer ergonomics.

Read the blog post: https://angular.schule/blog/2025-10-rx-resource-is-broken

Angular Signal Forms: Beginner’s Full Guide

Ready to build your first form with Signals? Fannis Prodromou (@prodromouf) walks you through a complete login form tutorial, perfect for those just getting started with this new API.

Watch the guide: https://www.youtube.com/watch?v=yeZoleR4v84

Angular v20 Deep Dive Series (French)

Modeste Assiongbon (@rblmdst) breaks down the latest updates in a three-part French language series, covering Asynchronous Redirects, Resource API breaking changes, and the New Style Guide.

Watch Part 1 (Style Guide): https://youtu.be/8yrEcnOHvlM
Watch Part 2 (Resources): https://youtu._gfa4PUtiaI
Watch Part 3 (Routing): https://youtu.be/f_mppF1Dw_k

Spread the knowledge across the globe! Use #AngularSparkles to share your latest tutorials and repos! 👇

Global Expertise: AI Blueprints, Resource API Fixes, and Angular v20 🌍 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This week, we’re sharing powerful stories and hands-on code! The Angular community is defined by its willingness to share personal journeys, provide practical examples, and dive deep into major features like Signal Forms.

Check out these valuable resources from Angular experts:

• From ASP.NET to Angular: My MVP Story
  Sonu Kapoor @SonuKapoor1978 shares a compelling personal story about transitioning from the ASP.NET ecosystem to becoming an Angular expert and MVP. This is a great read for anyone navigating a career shift!
• Read the inspiring journey: https://techcommunity.microsoft.com/blog/mvp-blog/from-asp-net-to-angular-my-mvp-story---sonu-kapoor/4458699
• Angular Signal Forms (3-Part Series)
  Ferdinand Malcher @fmalcher01 & Danny Koppenhagen provide the definitive guide to mastering the new Signal Forms API in Angular! This three-part series offers everything you need to know about this major update to forms management.
  Part 1: https://angular-buch.com/blog/2025-10-signal-forms-part1
  Part 2: https://angular-buch.com/blog/2025-10-signal-forms-part2
  Part 3: https://angular-buch.com/blog/2025-10-signal-forms-part3
• Building AI-Powered Content with Angular and Gemini
  Ready to integrate AI into your apps? Babatunde Lamidi shares a complete code sample showing you exactly how to build an AI-powered content generator using Angular and the Gemini API.
  Explore the GitHub repo: https://github.com/babatundelmd/ng-content-generator
• Modernizing Angular Control Flow
  Antonio Cardenas @yeoudev provides essential real-world guidance and code examples for updating your applications to use Angular’s new, more efficient built-in Control Flow syntax.
  See the code sample: https://dev.to/turingsoracle/updating-to-angular-20-a-real-world-guide-2h9o

Have you integrated Signal Forms or the new Control Flow into your app yet? Share your experience or a snippet of your code!

Help grow the ecosystem! Use #AngularSparkles to share your favorite Angular resources.

Community Stories, Code Samples, and Signal Forms! 🌟 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Authors: Jens Kuehlers, Mark “Techson” Thompson

(Check out our animated v21 adventure!)

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!

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:

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.

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.

Announcing Angular v21 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the realm of software testing, the concept of time can be a tricky one to manage, especially when dealing with asynchronous operations and timeouts. We are continually refining our approach to handling time in unit tests, particularly concerning the use of mock clocks. We’ve found that mock clocks, while useful, often lead to headaches in test code and unrealistic timing scenarios. To address these challenges, we are exploring the exciting concept of “auto-advancing” mock clocks, which aim to streamline testing and enhance the accuracy of time-based simulations. In this blog post, we’ll delve into the intricacies of mock clocks, their limitations, and the potential benefits of auto-advancing functionality.

Why use a mock clock

We see a few reasons to install mock clocks in tests.

1. To fake the date. This makes it possible to test components which display the current time or date related information, or do some calculation with respect to the current time.
2. More frequently, to speed up time. UIs are frequently written with debounces, visible delays for users, timeouts, etc. We want to verify the state of the app after these long-running tasks complete but we don’t want the test to actually wait 30 seconds for a timeout. Instead, mock clocks can fake the progression of time without needing to modify the production code to expose some overridable timeout simply to make the test quicker.
3. To prevent timers from leaking into other tests, creating action at a distance errors. Mock clocks can uninstall after each test and either dispose of or flush any pending timers.
4. To execute all pending timers or stabilize the test. This allows the test to say, “wait until everything that’s supposed to happen has happened”. This can be useful for several reasons, including to verify that something isn’t going to happen. For example, consider testing Gmail’s “undo” send button. After clicking the button, you would want to verify that the RPC to send the email was never sent. We can also verify that there is no pending work. If the test finishes while there is more asynchronous work pending, we don’t want the pending work to continue executing during the next test case. (It’s hopelessly confusing.) The test should either (1) wait for the work to finish, (2) dispose() of the workers explicitly, or (3, least preferred) ask the fake clock to discard pending timers/frames.
5. Much less common is to make time progress in specific increments in a unit test. One example might be a toast which appears after a known delay, and disappears after another known delay. This use of mock clocks, however, is not really a separate point from the second. We already have the ability to tick the clock specific amounts of time with timeouts. It’s just slow and mock clocks provide nice APIs to speed it up. Mock clocks can make these specific increments more predictable in tests. When using real timeouts, the ordering can sometimes depend on how quickly each task can be processed.

These are pretty good reasons to use a fake clock, and pretty broadly useful when async code is in play. We do support the idea of installing a fake clock.

Common pitfalls with mock clocks

While mock clocks offer a degree of control over time in tests, they can also introduce challenges and anti-patterns, and these all apply equally to Angular’s fakeAsync test helper.

Before the widespread availability and adoption of Promises and async/await in javascript, mock clocks helped keep tests manageable by making them synchronous. In modern-day javascript, we no longer need this. Furthermore, native Promises, async-await, resize or mutation observers, RPCs, etc cannot be executed synchronously; it is impossible to write a synchronous test for such logic. Tests with mock clocks are often forced into a situation where they need to both tick the mocked time and wait for real asynchronous code to happen. This can lead to unrealistic execution orders and can mask timing-related bugs. As a tester, keeping track of this can become a real nightmare and as a result, we’ve seen plenty of “big hammer” helper functions in tests:

async function realFlush(delay?: number) {
  clock.flush();
  await new Promise<void>(resolve => void setTimeout(resolve, delay));
  clock.flush();
}

Tests also become littered with hard-coded wait times, sometimes with purpose, but often somewhat arbitrary, such as mockClock.tick(1000) or mockClock.flushPendingTimers. Not only do these ticks and flushes often lack clear justification, but they also may need to be adjusted as the codebase evolves. Adjusting a timer in the production code can cause tests to fail, including many which were not intended to depend on or observe the specific timing implementation. In many ways, mock clocks can turn these sections of the tests into change detector tests.

Finally, some test utilities take it upon themselves to tick the mock clock, potentially interfering with the test’s intended timing and causing unexpected behavior. On the flipside, asynchronous test helpers and harnesses need to be informed about any installed mock clocks and how to advance them. Forgetting to provide this (assuming the testing APIs even have an option to do so, and many do not) will cause the test helper to stall, waiting for time that never advances.

Proposal: Allow mock clocks to automatically advance time

In the majority of use cases, mock clocks are used to speed up time. In order to do this, testers are opting into behavior that also stops time. We suspect that the majority of tests don’t want or need this. Clocks don’t stop in real life so it would make sense for mock clocks to advance on their own as well, unless there is a specific desire to pause it.

If mock clocks were able to advance time in a realistic way then we could realize a future where: No one should care whether time is being faked (unless they want to).

This includes business logic, test helpers, and even most tests themselves. It would be easy to migrate to a mock clock implementation with this property. That is, it would be ideal to be able to take a test that is written against real timer APIs and install a mock clock with no other changes to the tests. Auto-advance gets us pretty close.

Use cases

Tests with mock clocks would look identical to those without. Let’s go through some examples:

Testing async functions

When testing async functions, tests only need to enable auto advancing:

// methods_under_test.ts
export async function blackBoxWithLotsOfAsyncStuff() {
  // do some work
  await new Promise(r => void setTimeout(r, 10));
  // do some more work
  await new Promise(r => void setTimeout(r, 20));
  await Promise.resolve();
  // yay, we're done!
  return 'done';
}
// methods_under_test.spec.ts
// …
beforeEach(() => clock.setTickMode('auto'));
it('is easy to test async functions with interleaved timers and microtasks', async () => {
  const result = await blackBoxWithLotsOfAsyncStuff();
  expect(result).toBe('done');
});
// …

Waiting for conditions to be satisfied

The specific timeframe that conditions occur is usually best thought of as an “implementation detail”, rather than part of the public API commitments. It’s fairly easy to imagine changes in the future that alter the timeframe, and which are completely invisible to the user (and the test!).

For example, changing a debounce time on an instant search input from 100ms to 200ms. Tests which use mock clocks today would typically trigger the input, explicitly tick (100 or 200ms), and then make assertions. Instead, tests would use a polling API to explicitly wait for a condition to be satisfied as a result of the input changing, such as the Testing Library’s async methods:

beforeEach(() => clock.setTickMode('auto'));
it('gets results when the search changes', () => {
  const input = screen.getByLabelText('search-input');
  fireEvent.change(input, {target: {value: 'signals'}});
  await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
  await screen.findByText('Computed signals');
  fireEvent.change(input, {target: {value: 'control flow'}});
  await screen.findByText('Control Flow in Components - @if');
});

What’s next

We started working with test framework authors to support automatically advancing time in mock clock implementations. As of Jasmine v5.7, the clock now has the ability to advance automatically and can be enabled with Clock#autoTick. It is also released in @sinonjs/fake-timers version 15, which is used by Jest and Vitest.

// jasmine v5.7
jasmine.clock().install().autoTick();

// @sinonjs/fake-timers v15
const clock = FakeTimers.install();
clock.setTickMode({mode: 'nextAsync'});

// future Jest release
jest.useFakeTimers().setTimerTickMode({mode: 'nextAsync'});

Follow us on social media for updates. We hope that this feature is as exciting to the community as it is to us. An automatically advancing mock clock could help existing async tests be faster and more predictable, regardless of what web framework is being used, since this feature doesn’t require any other changes to the test after it’s enabled.

Handling Time and Mock Clocks in Tests was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

We’re overjoyed to announce that you can now generate Angular apps using the power of Google AI Studio.

We know that developers are embracing AI and code generation as a part of their daily workflows. Whether it is generating code to prototype a new app experience for your users or getting help on your existing projects — AI is there in the process. We want to ensure that Angular is in the places where developers are building.

This was a collaborative effort between the Angular team and AI Studio team with the goal of bringing the power of Gemini and AI tooling to the Angular community. Now, AI Studio is another tool where you can vibe code new apps, export the code to GitHub, share your creations with others and even deploy using Cloud Run.

Getting Started

To get started head over to the build tab in Google AI Studio where you can get started at no cost.

First, click the “Advanced Settings” icon to reveal the options for selecting the “System instructions template menu”:

Next, select “Angular (TypeScript)” from the “System instructions template” menu to update which framework you want to use for generating your app. Choose Angular 🙂

Finally, enter a prompt for an app idea and watch as Gemini generates your application.

Now that you know how to generate an application let’s walk through an example scenario. Consider the following prompt:

“Create a bookstore inventory UI. It should display a table of books with columns for title, author, genre, and stock quantity. Include a search bar to find books by title and author.”

Here’s a video walkthrough:

What Angular support in AI Studio unlocks

Angular developers are looking for ways to create new experiences for their audiences quickly and with low effort. This integration unlocks new, modern workflows:

• Rapid Application Generation with Gemini Model: AI Studio leverages the Gemini model to quickly generate Angular applications. Accelerating project kickoffs and prototyping for new ideas, reducing the initial development time from weeks to days.
• Develop AI Powered Apps powered by the Gemini API: AI Studio enables the development of AI-powered applications that leverage the Gemini API. This goes beyond code generation and into creating new application experiences for users that take advantage of the power of LLMs as a core feature.
• Integrated Deployment with Cloud Run: There is a well-lit path that integrates with Cloud Run for simplified application deployment. Developers can deploy generated applications directly to a scalable, serverless environment, eliminating manual configuration and speeding up delivery to users.
• Export to GitHub for Version Control: AI Studio allows users to export generated code to GitHub, providing a way to keep the project code you generate and track changes, collaborate effectively, and manage different iterations of their applications within a familiar version control system.
• Simplified Sharing for Collaboration: Take your creation and make it available to stakeholders or even just sharing a proof of concept app with colleagues as teams experiment with new ideas.

Get started right now

We’re excited to bring this new integration to the Angular community, giving you another way to build with Angular. We’re excited for you to generate code and explore the possibilities. To try out this new feature, be sure to head over to goo.gle/angular-ai-studio today and follow the instructions from this post to get started.

Try this out and create apps your users will love. If you make something cool tag us on social media with #AngularInAIStudio.

Angular support for generating apps in Google AI Studio is now available was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.