Angular 20 — What’s new ?

Kristiyan Velkov

Jun 11, 2025

Transcript

❤️ If you like my work, please follow me and subscribe ❤️

Angular 20 focuses on solidifying its reactivity model, enabling zoneless apps, improving SSR, enhancing developer experience, and supporting GenAI. It marks a maturity point for major innovations introduced since v16–v19.

🔗 Official Angular v20 Release Post

1. Stable Reactivity: Signals, Effects, linkedSignal, toSignal

After 3 years of iteration:

signal, computed, effect, linkedSignal, and toSignal are now stable.
Enables intuitive, fine-grained reactive programming.

🔗 Docs: Signals

Code Example:

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

const count = signal(0);
const doubleCount = computed(() => count() * 2);

count.set(1);
console.log(doubleCount()); // Outputs: 2

2. Zoneless Applications (Developer Preview)

Zone.js is now optional. You can bootstrap Angular apps using provideZonelessChangeDetection().

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

🔗 Docs: Zoneless Angular Dev Preview

3. Incremental Hydration & Route-Level Rendering (Stable)

Hydration now supports:

@defer (hydrate on viewport) syntax.
Route-level configuration for SSR, SSG, CSR.

provideClientHydration(withIncrementalHydration());

@defer (hydrate on viewport) {
  <shopping-cart />
}

🔗 Docs: Hydration Guide

4. Resource API & `httpResource` (Experimental)

Signal-based reactive handling of async resources.

const userId = signal('123');
const userResource = resource({
  params: () => ({ id: userId() }),
  loader: ({ request, abortSignal }) =>
    fetch(`/users/${request.id}`, { signal: abortSignal })
});

httpResource example:

@Component({
  template: `{{ userResource.value() | json }}`
})
class UserProfile {
  userId = signal(1);
  userResource = httpResource<User>(() =>
    `https://example.com/v1/users/${this.userId()}`
  );
}

🔗 Docs: Resource API

5. Experimental `vitest` Support

Replace Karma with Vitest easily:

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "vitest"
  }
}

Final Thoughts

Angular 20 is a refinement release — finalizing core architectural changes (signals, zoneless, SSR) while empowering developers with better tooling, testing, and DX.

🔗 All Docs: