Angular Labs LABS
COOKIES

What's New in Angular 20

Release planned for May 26th week

Angular 20.0.0 is not a version releasing some new key feature for the framework. But that's definitively a version improving the developer experience. Some more Signa APIS are now stable and ready to be used in production: effect, linkedSignal, toSignal and toObservable. Checkout their history on Can I Use feature.

While not being stable yet, Zoneless change detection has been promoted in preview, paving the way for a bright future.

You expected an experimental release for Signal Forms or Selectorless Components? These features are not ready yet as the Signal Forms prototype is still on a separate branch on Angular Repository but you can still check its docs to get an idea of what's coming. No public code is available yet in the Angular Repository for Selectorless Components.

Technical Requirements

  • TypeScript 5.8 or later
  • Node.js 20.11.1 or later

Prerequisites

Typescript

Angular 20 drops support for TypeScript versions less than 5.8 and defaults to 5.8.2 on a new/migrated project.

For a full list of TypeScript 5.8 changes, visit: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-8.html

Node.js

Node.js v18 reached End-of-Life on April 30, 2025, and will no longer be supported in Angular v20. Node.js versions 22.0 to 22.10 are also no longer supported.

Before upgrading to Angular v20, ensure the Node.js version is at least 20.11.1. Angular updated its min Node.js support to 20.19, 22.12, and 24.0.

For the full list of supported versions, visit: https://angular.dev/reference/versions

Signals

The Resource API has been released in 19.0 (resource and rxResource) and 19.2 (httpResource) as a developer preview feature and the v20 release only includes a few minor changes to it:

All other Signal APIs are now stable, which includes:

  • effect
  • linkedSignal
  • toSignal
  • toObservable

Tagged Template Literals

Simplify complex interpolation by avoiding concatenation in favor of template literals now supported:

@Component({
  template: "{{ greet`Hello, ${name()}` }}",
})
export class MyComp {
  name = input();


  greet(strings: TemplateStringsArray, name: string) {
    return strings[0] + name + strings[1] + "!";
  }
}

Enhanced dynamic component creation

So far we were not able to set inputs and outputs for a dynamic component on its creation itself. After creating it only, we were able to set the inputs and outputs in an imperative way:

export class App {
  vcr = viewChild('container', {read: ViewContainerRef});
  componentRef?: ComponentRef<AlertNotification>;


  createComponent(): void {
    this.vcr()?.clear();
    this.componentRef = this.vcr.createComponent(AlertNotification);


    this.componentRef.setInput('title', 'Something went wrong');
    this.componentRef.?.instance.closed.subscribe(() => {
      this.componentRef?.destroy();
    });
  }
}

Besides being very verbose, this approach did not include type checking for inputs, making it error prone.

The declarative way comes to the rescue

Angular 20 changes this in a declarative way, and enhancing two-way data and directive bindings too!

Angular 20 introduces a new API for creating dynamic components to siplify input/output, two-way data and directive bindings.

import {
  createComponent,
  signal,
  inputBinding,
  outputBinding,
} from "@angular/core";


const canClose = signal(false);


// Create MyDialog
createComponent(MyDialog, {
  bindings: [
    // Bind a signal to the `canClose` input.
    inputBinding("canClose", canClose),


    // Listen for the `onClose` event specifically on the dialog.
    outputBinding<Result>("onClose", (result) => console.log(result)),
  ],
  directives: [
    // Apply the `FocusTrap` directive to `MyDialog` without any bindings.
    FocusTrap,


    // Apply the `HasColor` directive to `MyDialog`
    // and bind the `red` value to its `color` input.
    // The callback to `inputBinding` is invoked on each change detection.
    {
      type: HasColor,
      bindings: [inputBinding("color", () => "red")],
    },
  ],
});

New Style Guide

Angular 20 release will also make the new Angular Style guide public, reducing its scope to focus on Angular specific recommanded code styling conventions. This will allow us to focus on the most important parts of the code and make it easier to understand and maintain.

Angular CLI

How are new projects affected with ng new

  • @angular/build is now the default builder for new Angular CLI projects.
  • Angular CLI ng generate command to not include suffixes anymore for Services, Component and directives

ng generate changes

components, directives and services

Say goodbye to suffixes for your generated components, directives and Services to match updates to the Angular style guide.

Angular CLI ng generate command to not include suffixes anymore for Services, Component and Directives. You can now pass a --type option to specify the type of the generated file: ng generate component product-list --type=component. It will result in a product-list.component.ts file being created, including a ProductListComponent class. Otherwise the new default behavior would be a product-list.ts file being created, including a ProductList class.

"schematics": {
    "@schematics/angular:component": {
      "type": "component"
    },
    "@schematics/angular:service": {
      "type": "service"
    },
    "@schematics/angular:directive": {
      "type": "directive"
    }
  }

guards, interceptors, pipes, resolvers and modules

These Angular entities keep the suffix on their class name, but the file name changes. The new default is to use a dash separator between the class name and the suffix. For example, auth.guard.ts becomes auth-guard.ts. You can pass the --typeSeparator option to specify the separator character to use for the generated file.

PWA

While not being under active developement and not something the Angular team really plan on spending time one one way or the other in the near future, a change happens in Angular 20 to consistently uses withAppShellfor vite projects (as not used previously by Webpack-based builders).

SSR

Header flushing introduced to optimize response time, reducing time to first byte (TTFB) and improving perceived load times.

First released in developer preview, the --server-routing ng new option is now removed to always enable server routing when using the application builder.

Migrations

SSR

Error reporting

Performance

Profiling

DX

Forms

Router

service worker

Can i use

CLI

schematics

Migrations

typescript

Testing

i18n

Chekc