Angular v20 Released - What's New?

🚀 Angular v20 is Officially Released!

Angular v20 is now available as of May 29, 2025, introducing major updates focused on performance, developer experience, and modern web practices.

✅ Stabilizing APIs

Purpose: Reactive state management without RxJS

The reactive programming model is now stable with production-ready APIs like effect(), linkedSignal(), and toSignal().

import { signal, effect } from '@angular/core';

const counter = signal(0);

effect(() => {
  console.log('Counter changed to:', counter());
});

counter.set(1); // Logs: Counter changed to: 1
counter.update(c => c + 1); // Logs: Counter changed to: 2

⚡ Zoneless Change Detection (Developer Preview)

Purpose: Run Angular apps without Zone.js for better performance

Angular v20 introduces a preview of zoneless change detection, improving performance and simplifying debugging.

import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [provideExperimentalZonelessChangeDetection()],
});

🌐 Enhanced Server-Side Rendering (SSR)

Purpose: Faster loading using Incremental Hydration and Route-Level Rendering

Features like incremental hydration and route-level rendering are now stable.

export const routes: Routes = [
  {
    path: 'products',
    loadComponent: () => import('./products.component').then(m => m.ProductsComponent),
    data: { ssrRender: true }, // Render this route server-side
  }
];

🛠️ Chrome DevTools Integration

Purpose: Debug performance with Angular-specific data in the Chrome Performance tab

Angular-specific profiling data is now available directly in Chrome DevTools’ Performance tab. Includes:

Component lifecycle timings
Change detection events
Template rendering phases

No extra setup—works automatically in development mode.

🧹 Updated Style Guide and Naming Conventions

Purpose: Cleaner file names without suffixes

Angular CLI no longer adds suffixes to file names by default.

# Before (Angular v19)
ng generate component user
# Generates: user.component.ts

# After (Angular v20)
ng generate component user
# Generates: user.ts (no .component suffix)

You can override with:

ng generate component user --style-guide-compat=false

🧪 Extended Type Checking in Host Bindings

Purpose: Safer bindings in directives

Improved type safety and support for host bindings and listeners.

@Directive({
  selector: '[appHighlight]',
  host: {
    '[class.highlighted]': 'isHighlighted' // Type-checked
  }
})
export class HighlightDirective {
  isHighlighted = true;
}

✨In short- What’s New in Angular 20?

1️⃣ Stable Signals API
Simpler and faster reactive state management — no RxJS needed!
2️⃣ Zoneless Change Detection (Preview)
Boost performance by running Angular apps without Zone.js.
3️⃣ Enhanced SSR
Enjoy lightning-fast loads with incremental hydration and route-level rendering.
4️⃣ Chrome DevTools Integration
Deep Angular insights now directly in Chrome’s performance panel.
5️⃣ Simplified File Naming
No more .component.ts clutter — cleaner, more intuitive naming!
6️⃣ Improved Type Checking
Smarter host bindings with safer, stricter type checking.

@let directive, enhancing template syntax by allowing variable declarations directly within HTML templates. This feature simplifies template logic by providing more flexibility and clarity, reducing the need for complex workarounds.

👉👉👉Angular18 new features

Template Local Variable with @let Block: A new feature in templates allows using the @let directive to declare local variables within templates, simplifying data binding and improving template readability.

Without @let variable: Creating local variables within templates was often verbose and required using additional directives or components.

Previously, you would often use directives ngIf combined with the as keyword to declare and use a variable within a template. For example:


<ng-container *ngIf="user as currentUser">
  <div>{{ currentUser.name }}</div>
</ng-container>

While this method works, it has limitations, especially when dealing with falsy values like 0. If the value is 0, the content inside ngIf won't render because 0 is considered falsy.

with @let variable:

Angular 18 introduces the @let directive, which simplifies the declaration of local variables within templates.

The @let directive allows you to declare a variable directly within the template, independent of its truthiness. This makes the template logic more straightforward and expressive. Here's how you can use @let:


<div>
  @let PrintName = 'myName, ' + name + '!';
  <h1>{{ PrintName }}</h1>
</div>


<div>
  @let points = (points$ | async) ?? 0;
  <h1>You have: {{ points }} points!</h1>
</div>

This ensures that even if points is 0, the content will still render correctly.

Benefits and Use Cases

Handling Falsy Values: As shown in the example, @let this helps manage cases where falsy values might disrupt the template rendering logic.
Complex Expressions: Simplify templates by storing complex expressions in a variable.

@let someField = someService.someSignal().someProperty.someOtherProperty;
<div>{{ someField }}</div>

3. Control Flow Directives: Combine @let with control flow directives like @if to streamline logic.

<div>
  @let user = user$ | async;
  @if (user) {
    <h1>{{ user.name }}</h1>
  }
</div>

4. Iterating with @for: Reduce code duplication in loops.

<mat-selection-list>
  @for (item of items(); track item.id) {
    @let isSelected = item.id === selectedId();
    <mat-list-option [selected]="isSelected" [class.selected]="isSelected">
      {{ item.text }}
      @if (isSelected) {
        <span>(selected)</span>
      }
    </mat-list-option>
  }
</mat-selection-list>

5. Ternary Operators and Math: Use @let with operators to make calculations directly in templates.

<div>
  @for (game of games; track game.id) {
    @let points = calcPoints(game.points > 0 ? game.points : 0);
    <h1>You have: {{ points }} points!</h1>
  }
</div>

Another Example

Calculate the Item Price


<div *ngFor="let item of items">
  @let totalPrice = item.price * item.quantity;
  @let date = (new Date(item.date)).toLocaleDateString();
  <p>{{ item.name }} - Total: {{ totalPrice }} on date {{date}}</p>
</div>

Benefit:

This new syntax makes templates more readable and easier to manage by reducing boilerplate code and improving data-binding practices

The @let the directive in Angular 18 significantly enhances template flexibility and readability. It reduces the need for complex directives and workarounds, making code cleaner and more maintainable

Dot Net Office

Angular v20 Released - What's New? | Angular v20 Now released