Ng-News 25/34: Angular 20.2

#webdev #programming #angular #javascript

Angular 20.2 has been released - the final minor update in the 20.x series.

According to semantic versioning, this means no new features until Angular 21, scheduled for November - only bug fixes will land in the meantime.

It was expected that Signal Forms wouldn’t make it in, but we did get a few other new features.

✅ Zoneless is now stable

Zoneless has now officially graduated to stable.

It already entered developer preview in Angular 20.0.

Zone.js has long been the mechanism to trigger Angular’s change detection - by listening to asynchronous tasks and user events.

Change Detection is the mechanism where Angular updates the DOM. So it is quite a critical functionality for the framework.

Given that context, the journey of going zoneless was a success story.

Introduced experimentally back in version 18, it worked reliably right from the start - and now it’s here to stay.

🎞 Native Animation Support

While Zoneless was simply marked as stable, the real new feature in this release is native animation support - along with the deprecation of @angular/animations.

With the new approach, you define two CSS classes in your stylesheet: one that applies when the DOM element is shown, and another for when it’s removed.

In your template, you then bind these classes using the animate.enter and animate.leave attributes.

@Component({
  styles: `
    img {
      max-width: 500px;
      height: auto;
    }

    .zoom-in {
      @starting-style {
        transform: scale(0);
      }
      transition: transform 300ms ease-out;
      transform: scale(1);
    }

    .zoom-out {
      transition: transform 300ms ease-in;
      transform: scale(0);
    }
  `,
  template: `
    <button (click)="toggleLogo()">Toggle Logo</button>
    <div>
      @if (showLogo()) {
        <img src="/angular.png" alt="Angular Logo"
             animate.enter="zoom-in"
             animate.leave="zoom-out"
        />
      }
    </div>
  `,
})
export class App {
  protected readonly showLogo = signal(false)

  toggleLogo() {
    this.showLogo.update(value => !value)
  }
}

📦 Signal-powered APIs and the Router

We know that, long term, Angular aims to make the dependency on RxJS optional.

Parts of the API are already moving in that direction: the new output() function no longer relies on RxJS, and the recent httpResource() shows a path toward RxJS-less HTTP communication.

For forms, this role will be filled by Signal Forms.

The main piece still relying heavily on RxJS is the Router.

With Angular 20.2, the first step has been taken:

The Router service now exposes a currentNavigation Signal, replacing the deprecated getCurrentNavigation() method.

The result remains the same - either the Navigation interface or null.

🤖 AI Support via MCP

In terms of support for AI, Angular 20.2 also brought further improvements.

Not just for the MCP server - which was introduced in 20.1 - but you can now also generate configuration files for common IDEs, so they are aware of best practices too.