Month: August 2025

What’s new in Angular 20.2?

Alain Chautard

Another month, another minor version of our favorite front-end framework!

Zoneless

This time around, Zoneless change detection becomes stable (more about Zoneless here), so you can remove Zone.js from the equation if you’ve followed the rules to make sure Angular will detect your changes properly with OnPush-compatible components.

Animations

The @angular/animations package is deprecated and replaced with a new API using the animate.enter/animate.leave syntax as follows:

 <div animate.enter="fade-in" animate.leave="fade-out">My content</div>Code language: HTML, XML (xml)

Aliases in blocks

You can use local aliases in if, else, and else if blocks as follows:


⁠@if (currentUser(); as user) {
  Welcome user {{ user.name }}!
} @else if (expiredSession(); as exp) {
  Please log in. Your session expired at {{ exp.time }}
}Code language: JavaScript (javascript)

New diagnostics

Diagnostics give you hints and feedback on possible mistakes. These apply to instances where your code compiles but is likely doing something wrong. A new diagnostic called uninvokedFunctionInTextInterpolation has been added to warn you when you use a method in a template without calling it (forgot the parentheses).

Testing

You can now use a headless browser with your Vitest unit tests using the builder introduced in v20. This is still experimental, though.

As a reminder, here are the updates from the previous version, Angular 20.1.

Visualizing internal dependencies with Madge

Alain Chautard

When working on large Angular projects, managing dependencies between files and modules can become a significant challenge. Madge is a developer tool that visualizes and analyzes module dependencies in JavaScript applications, making it an excellent companion for Angular developers.

Here is how to give it a try:

  1. Install madge: npm install -g madge
  2. In the root folder of your project, run: npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png

This command will go through your entire application and create a dependency graph as an image in deps.png:

This can be used to identify circular dependencies, visualize relationships between your different components and services, and identify spaghetti code scenarios.

Note that Madge has other specific commands, such as one to detect circular dependencies:
npx madge --circular src/main.ts --ts-config tsconfig.json

Or that one to detect dead code (code that is never referred to anywhere in your app):

npx madge --orphans src/main.ts --ts-config tsconfig.json

You can find more information on Madge’s NPM page here.

Injection context, Angular talks, and more!

Alain Chautard

This week, we’re back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder:

Three (maybe four) articles to revisit:

  • Have you ever used ElementRef in Angular? It’s a way to access DOM elements natively, which can come in handy when integrating with some 3rd party libraries.
  • With the introduction of takeUntilDestroyed and the inject function, it has become more important than ever to understand what is an injection context.

Two quick updates:

  • A talk I’m looking forward to: The Angular team is presenting a “Deep Dive into the Angular Signal Forms” at Angular Connect on September 13th. Could it be a sign of imminent release in developer preview? Wait and see…

One question to ponder:

  • With Angular Signals now in the mix, many are rethinking their state management strategy. If you’re a long-time user of a state management library, has your perspective shifted? Knowing what you know now, would you still reach for a library on a new project?