This content originally appeared on Angular Blog - Medium and was authored by Angular
Authors: Jens Kuehlers Mark Techson
As summer reaches its peak, the Angular team wants to share some updates from the latest minor releases.
Since launching Angular v20 in May, the team has been hard at work shipping new features and improvements in v20.1 and v20.2. We are continuing our mission to boost developer productivity and help you create apps your users will love. As part of that mission, we’ve also expanded our AI offerings to enhance your development workflow.
Highlights
- Zoneless APIs are production ready
- Experimental MCP server to help with LLM codegen
- Built-in APIs to animate elements as they enter and leave the DOM
- Signals and router visualization in Angular DevTools
- Improved template authoring experience
- A new developer event coming in September ✨
Major Milestone: zoneless Angular is here 🎉
Zones served as the mechanic that drove the Angular change detection cycle. While it had its benefits there issues surfaced over time including difficulty debugging apps, larger bundle sizes and more. As a result, developers have been asking for optional zones for some time and the team has been diligently working on making it a reality. We’re excited to announce that as of Angular v20.2, zoneless Angular is stable. That means you can use it in production. To get started, you’ll want to update your application configuration to use provideZonelessChangeDetection :
bootstrapApplication(MyApp, {providers: [
provideZonelessChangeDetection(), // ← this brings the magic
]});That’s the base requirement for using Angular without zones. Your code may require some updates and should adhere to our recommendations and best practices. Head over to the Angular documentation to find out the details of using Angular without zones. If you are still using zones in your code, don’t fret, zone.js will continue to be supported. We’d love to hear how your development experience has improved as a result of switching to zoneless.
New ways to animate your elements
We’ve dropped quite a few new features to improve your developer experience. For example — the @angular/animationspackage served developers well as they sought to delight users with animated experiences. However, as the CSS standard progressed, we found that the browser became capable of providing users with all the tools they need to build excellent user experiences. As a result, we developed two new primitives: animate.enterand animate.leave, which let you configure which CSS classes should be used for the “enter” and “leave” animations enabling the use native CSS animations in your Angular applications easier.
Let’s check out this feature in action. Consider a card in your template that should fade in on enter. You can apply any css class to the element, in this case “card-slide”, using the animate.enter primitive:
<div class="card" animate.enter="card-slide">
<p>user-details-card</p>
</div>
Similarly, you can use the animate.leave primitive in the template to define which class should be applied when the element leaves:
<div class="card" animate.enter="card-slide" animate.leave="card-fade">
<p>user-details-card</p>
</div>
You can also use the new enter and leave API with JavaScript-based animation libraries like GSAP and anime.js. Be sure to review the developer guide for more info on how to take advantage of all the great new features available.
With the additions of these two new primitives, developers have a more complete animations experience. You can now:
- animate elements
- use page transitions with the Angular router
- apply animations for the enter and leave events
With this change we’re also deprecating the @angular/animations package. We also have a great live stream from the Angular team showing off these new features.
Angular & AI powered development, better together
In v20, we landed angular.dev/ai, the destination for all things Angular & AI. We’ve created all-new guides on how to build AI-powered applications using technologies such as Genkit, Firebase AI Logic or by using the Gemini API. You can also find code samples, video guides and helpful best practices to make sure you can have the best experience when developing with AI tooling or AI powered applications.
We’re now hard at work on another part of the AI story: developer tooling. We’ve been focused on ensuring you can make best use of all the tools for AI assisted coding in tools such from Google like Firebase Studio, Gemini CLI and Gemini Code Assist. We’ve also worked with our community to make sure developers can have a standout experience in popular tools such as WebStorm and more. We provide system instructions and rules files for major IDEs to make sure these tools have the right context and create modern Angular code. You can find all the files and instructions on angular.dev/ai/develop-with-ai.
We’re taking our investment in AI beyond just developing prompts. We’ve also developed a set of evaluations and custom tools to rank and score apps generated with the prompts. Based on our preliminary results we’ve seen a significant improvement in the quality of code generated with models. If you are interested in learning more, we’ll be sharing more about our AI work, tools, integrations and more on September 16, 2025 at our Angular AI Event.
As developers continue to expand their use of AI tools and products the team has been collaborating with teams here at Google to expand Angular support. We’re excited to announce that you can generate Angular apps in Gemini Canvas and Google AI Studio! Now Angular developers have even more fantastic tools available to build their next great application.
Improving the framework for humans and LLMs
While evaluating code generation, we discovered some opportunities to further improve the outputs from LLMs. We noticed that in some cases we could even improve the experience for developers to even better reason about the framework and features. As we began to look more closely, it became more clear that there was a time cost and potential token cost if developers or models got confused when dealing with these cases. We took the opportunity to improve the framework itself with small tweaks that result in saving you time and tokens. For example,
- we now support “as” aliases in @else if blocks (although we prefer if you use @let)
- better support for class names used by Tailwind
- more permissive when you use @ in templates
- more ergonomic syntax for ARIA attributes
All of these should make your template authoring experience much smoother and help improve generated code, too.
Access to powerful tools with Angular’s MCP server
We’ve taken the first very important steps towards meeting even more of the AI needs of developers by publishing the new Angular MCP server. This initial launch includes tools for searching documentation, getting the best practices content for LLMs to improve codegen, and getting project metadata. We are working diligently to bring the right tools for developers even more meaningful features.
For more information on how to get started with Angular’s MCP server, check out the documentation on angular.dev/ai.
Better Debugging Experience and testing in your Angular applications
At Google I/O 2025 we landed the fantastic new profiling UI in Chrome DevTools helping developers gain even more insights when debugging applications. Now, in the latest updates from the Angular team, we’re adding route visualization and a new signal graph in Angular DevTools 🎉
When you enable the route visualization from the settings menu, you’ll be able to see your application’s routing information at a high level. Additionally, clicking on the route nodes will reveal the details in the “Routes Details” panel. Check out this screenshot to see it in action:
We know the Angular community really enjoys an improved debugging experience so we are also providing access to another helpful visualization for you. You can now visualize your application’s signal graph. As your applications grow in complexity, having insight into your data flow will be invaluable. Here’s an example of how it looks:
Here’s another neat bonus — click on a signal node to reveal details about that signal. With tools like these, your development experience will improve and your users will benefit, too. Thanks to Angular contributor Igor Sedov for this cool video showing off this new feature:
Testing components just got easy with support for passing in binding objects into TestBed.createComponent. You no longer need to create a wrapper component to test your components. Another significant benefit is that it keeps the behavior consistent between tests and your actual application. Let’s look at a before and after comparison:
Before:
it('should toggle the checked class', () => {
// wrapper class 😭
@Component({
imports: [MyCheckbox],
template: '<my-checkbox [isChecked]="isChecked"/>',
})
class Wrapper {
isChecked = false;
}
const fixture = TestBed.createComponent(Wrapper);
const checkbox = fixture.nativeElement.querySelector('my-checkbox');
fixture.detectChanges();
expect(checkbox.classList).not.toContain('checked');
fixture.componentInstance.isChecked = true;
fixture.detectChanges();
expect(checkbox.classList).toContain('checked');
});After:
it('should toggle the checked class', () => {
// no wrapper class 😯
const isChecked = signal(false);
const fixture = TestBed.createComponent(MyCheckbox, {
bindings: [inputBinding('isChecked', isChecked)]
});
const checkbox = fixture.nativeElement.querySelector('my-checkbox');
fixture.detectChanges();
expect(checkbox.classList).not.toContain('checked');
isChecked.set(true);
fixture.detectChanges();
expect(checkbox.classList).toContain('checked');
});The after code is clearer and easier to reason about for developers.
Speaking of tests, we got a great community contribution from @wildcardalice that extends the Angular test harness in some helpful ways. This update introduces three new functionalities to the Angular Component Harness test kit: getHarnessAtIndex, countHarnesses, and the ability to filter harnesses by their floating label text. These additions provide more flexible and intuitive ways to locate and interact with component instances during testing.
Maybe with these updates more people will write tests 😇
New Features and Quality-of-Life Improvements
The Mat Menu component received a helpful update that means you can now use it as a context menu. This change provides even more utility and new ways to use Mat Menu in your applications:
<div class="example-context-menu-area" [matContextMenuTriggerFor]="contextMenu">
Right click here to trigger a context menu
</div>
If you have ever wanted to pass a custom EnvironmentInjector to an NgComponentOutlet now you can — here’s a code snippet:
<ng-template *ngComponentOutlet="environmentInjector: myEnvironmentInjector">
</ng-template>
This creates a way to provide a customized dependency injection context for the dynamically created component. You can control which services and providers are available to the component, isolating it from the default application-level injector.
On top of all the stuff we’ve covered so far there are yet more updates, here’s a list:
- Angular documentation has improved with a new, revamped routing guide 🎉
- A new currentNavigation signal property is available on the router.
- There’s now a destroyed property on DestroyRef
- You can use a new set of binary operators in templates
- httpResource and httpClient received some excellent improvements
- (FINALLY) Better type inference for event target of void elements
- Improved support for using aria attributes in Angular templates
- We’ve added support for TypeScript 5.9 bringing along the benefits of the latest version
Believe it or not, this isn’t even the entire list of updates. You can find out more in the changelog.
Angular mascot update
The Angular community turned out for our mascot RFC in huge numbers to share their feedback to help shape the future of the Angular mascot. We received some incredible ideas and loved how much passion the community demonstrated throughout the process. We’re taking all of that feedback and narrowing it down to a design that we’ll be revealing later this year.
Angular momentum continues
There are so many features, updates and improvements that we could write one of Minko’s legendary 20 page blogs just based on the updates from this release. Check out the Angular changelog if you’d like to see everything we released.
One more thing — we have big plans for Angular and AI. We have some exciting news and updates to share and long with demos from the Angular team and teams at Google. You don’t want to miss our upcoming Angular AI Event September 16, 2025 live on YouTube.
Until the next time — create apps your users will love.
Angular Summer Update 2025 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Angular
Angular | Sciencx (2025-08-29T20:51:40+00:00) Angular Summer Update 2025. Retrieved from https://www.scien.cx/2025/08/29/angular-summer-update-2025/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.