Angular 20

Angular 20 – I hope you’re ready for nothing.. major just yet

Angular 20 has just been released this week (May 28, 2025). There are many exciting things to look forward to from improvements to signals to edging closer to a zoneless app. A lot of progress has been made towards stabalizing some key features expected in subsequent releases.

Improved stability

There has been some much anticipated advancements regarding improved stability for various APIs.

APIs relating to signals have now been stabilized. A key few to mention:

• afterRender has been replaced with afterEveryRender
• toSignal and toObservable have now been stabilized and therefore there will be no breaking future updates
• linkedSignal we go more in depth in our Angular 19 blog
• effect()
• toSignal()
• toObservable()
• afterRenderEffect()
• afterNextRender()
• PendingTasks

Zoneless – change detection of the future

The transition is not quite complete yet however, we're headed in the right direction as provideExperimentalZonelessChangeDetection has now been promoted to dev preview. Subsequently in Angular 20 ' experimental' has been dropped from the name and can be accessed with provideZonelessChangeDetection. When migrating to zoneless change detection, the function provideExperimentalCheckNoChangesForDebug is now called provideCheckNoChangesConfig and when used can provide a great way to test your applications readiness for when angular eventually fully migrates.

New Features

Template update

• void operator can be used to ignore the response of a function in a template. This will ensure that no unnecessary calls are made to event listeners like event.preventDefault() for example

• in is supported in templates now. This operator is great for conditionally rendering properties as it is used to verify if a value is present in an object before interpolating.

      @if('tulip' in garden) {
        <button(click)="water"></button>
      }

• You can now use untagged template literals directly in expressions:

  <p>{{ `User id: ${userId()}` }}</p>

Resolvers

Child routes can now read the resolved data from the parent!

      provideRouter([
      {
          path: "user/:id",
          resolve: {user: userResolver},
          // resolver in the parent route
          children: [
              {
                  path: "account",
                  // route.data.user is has been resolved by parent
                  component: UserAccount,
              },
          ],
      },
  ]);

Control flow

Control flows introduced in Angular 17 led to a more intuitive usage with the added benefit of it being closer to JS syntactically. In Angular 20 they have taken the steps to deprecate structural directives in favour of the built in control-flows

• You can easily transition from structural directives to built in control flow using the new schematic ng generate @angular/core:control-flow

Angular CLI

• Naming conventions

  Angular style guide has been updated and as a part of this change default naming conventions have been updated to no longer include type as a suffix (pipes, resolver, interceptors guards, and modules remain the same). Running the following command will now produce

    ng g c user
    - user.ts // component file
    - user.html 
    - user.css

  If you choose to negate this behaviour you can do so by generating using the flag --type=<component | service ...>

• Simplified angular.json By using @angular/build instead of @angular-devkit/build-angular there is a reduction of nearly 200Mb in your node_modules

• Browser configuration:

  In Angular 20 the default browser support has been updated. It is still possible to customise this list, however this configuration should support 95% of current web users.

       Chrome >= 107
       ChromeAndroid >= 107
       Edge >= 107
       Firefox >= 104
       FirefoxAndroid >= 104
       Safari >= 16
       iOS >= 16

Chrome DevTools

In this release there has been great effort put towards improving developer debugging experience. Angular devtools have partnered up with Chrome DevTools and with this comes additional functionality that will enable devs to see onPush components as well as defferd blocks in the component tree. Next steps for this feature will be to see signals tree in the devtools.

GenAI advancements

The latest release enables the usage of LLMs to create angular apps with GenAI. A major part of this effort goes towards maintaining an llms.txt file that helps large language models discover the latest Angular documentation and code samples.

There are still some drawbacks that devs are facing when using GenAI to create the app which that is that a few LLMs are following older Angular syntax such as using outdated control flows or not following the standalone component pattern. These are known issues and will continue to be improved upon in future releases.

Host type checking

In prior versions of Angular @HostBinding() and @HostListener() decorators were not being typechecked which could lead to some undesirable side effects. In NG20 we can mitigate this by using a new option of the compiler:

"angularCompilerOptions": {
  "typeCheckHostBindings": true,
   ...
  }

The type checker is smart enough to derive if the binding works with all elements in the selector. It validates both the right and left side.

Mascot 🤩

A mascot represent a brand’s core values and missions. It brings a brand to life with personality and emotion. Angular has an incredibly supportive community and so I'm looking forward to see how this manifests in mascot form! True to Angular’s values of inclusivity and community-driven decisions, they've opened up this process for everyone to contribute. Find the official Angular mascot RFC here

Compatibility

Support for Node 18 and TypeScript versions below 5.8 has been dropped. In order to move to angular 20 you would need to update:

   RxJs >= 6.5.3 
   Node >= 20.11.1
   Typescript >= 5.8.0

Final thoughts

I'm quite excited for what this release is paving way for. Stabalising many of the signal APIs is a promising step towards signal forms!

In general this release has brought great new functionality with few breaking changes while also continuing to put effort towards enhancing the developers experience from brand-new devs using GenAI to start their first project to helping more experienced devs by enhancing devtools with increased support for signal debugging. This release has me anticipating the next for sure! A stable base has been created for upcoming features like selectorless components and signal forms :)