✅ Zoneless reaches stable status

The long-awaited zoneless mode has officially left developer preview and is now marked as stable. It had already been available for experimentation since version 20.0.

For quite some time, Zone.js served as the core engine behind Angular's change detection—it kept track of asynchronous operations and DOM events to know when to refresh the view. Change detection, in turn, is what keeps the DOM in sync with application state, making it absolutely essential to the framework's operation.

Considering how critical this functionality is, the shift to a zoneless architecture has been quite a smooth ride. First introduced as an experimental option back in version 18, it has performed reliably from day one—and now it's officially a permanent part of Angular.

🎞 Built-in animation support

While zoneless was simply declared stable, the true headline feature in this release is native animation support—and with it, the deprecation of the @angular/animations package.

Under this new system, you define two CSS classes in your stylesheet: one that styles the element when it's visible, and another that applies when it's being taken out of the DOM. In your template, you attach these classes via 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)
  }
}
Enter fullscreen mode Exit fullscreen mode

📦 Signal-based APIs and the Router

Angular's long-term roadmap includes making RxJS an optional dependency. Several parts of the framework have already begun moving in that direction: the newer output() function operates without RxJS, and the recent httpResource() function demonstrates a route toward HTTP handling without RxJS.

For forms, this void will be addressed by Signal Forms. The one substantial area still tightly coupled to RxJS is the Router.

Angular 20.2 marks the first step in that migration: the Router service now offers a currentNavigation Signal, which supersedes the now-deprecated getCurrentNavigation() method. The return value hasn't changed—you still get either a Navigation object or null.

🤖 AI support through MCP

This release also brings further refinements to AI tooling. Beyond the MCP server that debuted in version 20.1, you can now generate configuration files for popular IDEs, allowing them to adhere to Angular's recommended patterns as well.

🧩 Other notable changes

Working with ARIA through property bindings just got simpler—the attr. prefix is no longer required.

And the @else if block now offers alias support, matching the functionality already present in the @if block.