What's New in Angular 20: A Developer's Guide

Angular 20 has arrived with exciting new features that make development faster, cleaner, and more intuitive. Let's explore what's new in a way that's easy to understand, with practical examples you can use today.

Signal APIs Are Now Stable!

After months of development, Angular's signal APIs have graduated from experimental to stable. This means you can confidently use them in production applications.

What are Signals?

Think of signals as smart variables that automatically notify your app when they change. Here's a simple example:

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

@Component({
  template: `
    <h2>Shopping Cart</h2>
    <p>Items: {{ itemCount() }}</p>
    <p>Total: ${{ totalPrice() }}</p>
    <button (click)="addItem()">Add Item</button>
  `
})
export class ShoppingCartComponent {
  // Create signals
  items = signal([
    { name: 'Coffee', price: 5 },
    { name: 'Sandwich', price: 8 }
  ]);
  
  // Computed signals automatically update
  itemCount = computed(() => this.items().length);
  totalPrice = computed(() => 
    this.items().reduce((sum, item) => sum + item.price, 0)
  );
  
  addItem() {
    this.items.update(current => [...current, { name: 'Cookie', price: 3 }]);
  }
  
  constructor() {
    // Effects run when signals change
    effect(() => {
      console.log(`Cart has ${this.itemCount()} items`);
    });
  }
}

Zoneless Change Detection (Developer Preview)

Angular is moving away from Zone.js for change detection. This makes your apps faster and more predictable.

// In your main.ts
import { provideZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    // ... other providers
  ]
});

When you use zoneless mode, Angular relies on signals to know when to update the UI instead of monkey-patching browser APIs.

Enhanced Template Features

Angular 20 brings several new operators to templates, making them more powerful and expressive.

1. Exponentiation Operator (**)

<!-- Calculate powers directly in templates -->
<p>2 to the power of 8 is: {{ 2 ** 8 }}</p>
<!-- Output: 2 to the power of 8 is: 256 -->

2. Void Operator

Useful when you want to call a function but ignore its return value:

<!-- Prevent default behavior by ignoring return value -->
<button (click)="void trackClick()">Click me</button>

3. The 'in' Operator

Check if a property exists in an object:

@if ('admin' in userRoles) {
  <button>Admin Panel</button>
}

4. Tagged Template Literals

<!-- Use template literal functions -->
<p>{{ translate`welcome.message` }}</p>

New 2025 Style Guide: Simpler File Names

Angular 20 introduces a cleaner naming convention that reduces redundancy.

Old vs New Naming

Before (Angular 19):

user.component.ts  → UserComponent
user.component.html
user.component.css
user.service.ts    → UserService

After (Angular 20):

user.ts           → User
user.html
user.css
user-service.ts   → UserService

Generating Components with New Style

# New style (default in Angular 20)
ng generate component user
# Creates: user.ts, user.html, user.css

# Old style (if you prefer)
ng generate component user --type=component
# Creates: user.component.ts, user.component.html, user.component.css

Performance Profiling Made Easy

Angular 20 introduces built-in performance profiling to help you identify bottlenecks.

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

// Enable profiling in development
if (!environment.production) {
  enableProfiling();
}

After enabling profiling, use Chrome DevTools to record performance and see detailed Angular timing information in a custom track.

Enhanced HTTP Client

Keepalive Support

Ensure your HTTP requests complete even if the user navigates away:

typescriptthis.http.post('/api/analytics', data, {
  context: new HttpContext().set(FETCH_TOKEN, {
    keepalive: true
  })
}).subscribe();

Improved Resource API

The resource API gets cleaner with better naming:

typescript// Before
const userResource = resource({
  query: () => ({ id: userId() }),
  loader: ({ query }) => this.userService.getUser(query.id)
});

// After (Angular 20)
const userResource = resource({
  params: () => ({ id: userId() }),
  stream: ({ params }) => this.userService.getUser(params.id)
});

Important Changes to Know

Deprecated Features

• ngIf, ngFor, ngSwitch: Use the new control flow syntax instead

html<!-- Old way -->
<div *ngIf="user">{{ user.name }}</div>
<div *ngFor="let item of items">{{ item }}</div>

<!-- New way (recommended) -->
@if (user) {
  <div>{{ user.name }}</div>
}
@for (item of items; track item.id) {
  <div>{{ item }}</div>
}

Requirements

• TypeScript 5.8+: Required for new language features
• Node.js 20+: Minimum version for Angular 20

Summary

Angular 20 brings significant improvements that make development more enjoyable:

• Stable signals for reactive programming
• Cleaner file naming conventions
• Better testing with Vitest support
• Enhanced templates with new operators
• Improved performance profiling
• Zoneless change detection for better performance

These changes represent Angular's commitment to modern web development practices while maintaining the framework's enterprise-grade reliability.

Whether you're starting a new project or upgrading an existing one, Angular 20 offers compelling reasons to make the move. The combination of stable signals, improved developer experience, and performance enhancements makes it a solid foundation for building the next generation of web applications.

Ready to try Angular 20? Start with a simple project and explore these new features hands-on. The future of Angular development looks brighter than ever!