Angular Signals verstehen: Von Zone.js zu reaktiver Programmierung

Angular Signals sind da - und sie verändern alles. Als Web-Entwickler kennst du das Problem: Deine Angular-App wird langsamer, je größer sie wird. Change Detection frisst Performance, und RxJS macht dir das Leben schwer. Zeit für einen Paradigmenwechsel.

Was sind Angular Signals überhaupt?

Stell dir vor, du hast eine Variable, die automatisch alle abhängigen Werte aktualisiert, sobald sie sich ändert. Genau das sind Signals - reaktive Primitive, die eine Revolution in der Angular-Entwicklung eingeläutet haben.

Die Grundidee hinter Signals

Signals sind nicht neu. Die Technologie stammt aus den 1960er Jahren und wurde für elektronische Tabellenkalkulationen entwickelt. Das Problem damals: Wenn sich ein Wert änderte, mussten Programmierer manuell alle abhängigen Berechnungen neu durchführen.

Die Lösung war brillant einfach: Ein System, das automatisch die richtige Reihenfolge der Berechnungen einhält. Genau dieses Prinzip nutzen Angular Signals heute für deine Web-Apps.

Warum Signals deine Angular-App revolutionieren

Das Zone.js Problem verstehen

Angular nutzt seit Version 2 Zone.js für Change Detection. Das funktioniert so: Zone patcht Browser-APIs und sagt Angular "Hey, hier ist was passiert!" Aber Zone weiß nicht, was genau passiert ist.

Das Ergebnis? Angular muss den gesamten Component-Tree durchlaufen und prüfen, ob sich etwas geändert hat. Bei großen Apps wird das schnell zum Performance-Killer.

Signals als Lösung

Mit Signals weiß Angular genau, was sich geändert hat und welche DOM-Nodes betroffen sind. Das nennt sich "fine-grained reactivity" - und es macht deine App deutlich schneller.

Angular Signals API: Dein Werkzeugkasten

Writable Signals - Die Grundlage

Writable Signals sind dein Einstiegspunkt. Sie speichern Werte, die sich unabhängig von anderen Zuständen ändern können:

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

// Signal erstellen
const count = signal(0);

// Wert lesen
console.log(count()); // 0

// Wert setzen
count.set(5);

// Wert basierend auf vorherigem Wert ändern
count.update((value) => value + 1);

Computed Signals - Abgeleitete Werte

Computed Signals berechnen sich automatisch neu, wenn sich ihre Abhängigkeiten ändern:

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

const quantity = signal(2);
const price = signal(10);

const total = computed(() => quantity() * price());

console.log(total()); // 20
quantity.set(3);
console.log(total()); // 30 - automatisch aktualisiert!

Effects - Seiteneffekte handhaben

Effects laufen automatisch, wenn sich überwachte Signals ändern:

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

const userName = signal('Gast');

effect(() => {
  console.log(`Willkommen, ${userName()}!`);
});

userName.set('Max'); // Logs: "Willkommen, Max!"

Praktische Anwendung: Shopping Cart mit Signals

Hier siehst du, wie Signals in der Praxis funktionieren. Wir bauen einen reaktiven Warenkorb:

@Component({
  selector: 'app-cart',
  template: `
    <div>
      <p>Menge: {{ quantity() }}</p>
      <p>Einzelpreis: {{ itemPrice() | currency }}</p>
      <p>Gesamtpreis: {{ totalPrice() | currency }}</p>
      <button (click)="addItem()">Hinzufügen</button>
    </div>
  `,
})
export class CartComponent {
  // Writable Signals
  quantity = signal(1);
  itemPrice = signal(29.99);

  // Computed Signal
  totalPrice = computed(() => this.quantity() * this.itemPrice());

  // Effect für Logging
  logEffect = effect(() => {
    console.log(`Gesamtpreis: ${this.totalPrice()}`);
  });

  addItem() {
    this.quantity.update((q) => q + 1);
  }
}

Asynchrone Daten mit resourceAPI

Für HTTP-Requests bietet Angular die resourceAPI - ein mächtiges Tool für asynchrone Operationen:

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

@Component({
  selector: 'app-product-list',
})
export class ProductListComponent {
  // Automatische HTTP-Requests
  products = resource({
    loader: () => this.http.get<Product[]>('/api/products'),
  });

  // Status-Handling im Template
  template: `
    @if (products.isLoading()) {
      <p>Lädt...</p>
    } @else if (products.error()) {
      <p>Fehler: {{ products.error() }}</p>
    } @else {
      @for (product of products.value(); track product.id) {
        <div>{{ product.name }}</div>
      }
    }
  `;
}

Migration: Von RxJS zu Signals

Schritt 1: Observables zu Signals konvertieren

Mit der RxJS Interop Library geht das einfach:

import { toSignal } from '@angular/core/rxjs-interop';

// Vorher: Observable
products$ = this.http.get<Product[]>('/api/products');

// Nachher: Signal
products = toSignal(this.products$, { initialValue: [] });

Schritt 2: Component Inputs modernisieren

Signal-basierte Inputs sind reaktiv von Natur aus:

// Vorher: Decorator-basiert
@Input() productId!: string;

// Nachher: Signal-basiert
productId = input.required<string>();

Schritt 3: Migration Schematics nutzen

Angular bietet automatische Migrations-Tools:

# Signal Inputs migrieren
ng generate @angular/core:signal-input-migration

# Query Functions migrieren
ng generate @angular/core:signal-queries-migration

Performance-Optimierung mit OnPush

Kombiniere Signals mit OnPush Change Detection für maximale Performance:

@Component({
  selector: 'app-optimized',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>{{ count() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class OptimizedComponent {
  count = signal(0);

  increment() {
    this.count.update((n) => n + 1);
  }
}

Zoneless Angular: Die Zukunft

Angular arbeitet daran, Zone.js komplett zu entfernen. Mit Signals und OnPush bist du schon heute bereit für zoneless Angular:

• Kleinere Bundle-Größen
• Bessere Performance
• Einfacheres Debugging
• Mehr Kompatibilität mit JavaScript-Bibliotheken

State Management mit Signal Services

Für komplexere Anwendungen erstelle Signal-basierte Services:

@Injectable({ providedIn: 'root' })
export class CartService {
  // Private writable signal
  private _items = signal<CartItem[]>([]);

  // Public readonly signal
  readonly items = this._items.asReadonly();

  // Computed values
  readonly total = computed(() =>
    this._items().reduce((sum, item) => sum + item.price, 0),
  );

  readonly itemCount = computed(() => this._items().length);

  // Methods
  addItem(item: CartItem) {
    this._items.update((items) => [...items, item]);
  }

  removeItem(id: string) {
    this._items.update((items) => items.filter((item) => item.id !== id));
  }
}

Best Practices für Angular Signals

1. Readonly für öffentliche Signals

Verhindere ungewollte Änderungen von außen:

private _count = signal(0);
readonly count = this._count.asReadonly();

2. Typisierung nutzen

Signals sind typsicher - nutze das:

const userName = signal<string | null>(null);
const age = signal<number>(0);

3. ESLint Rules aktivieren

Erzwinge moderne Angular-Patterns:

{
  "rules": {
    "@angular-eslint/prefer-signals": "error",
    "@angular-eslint/prefer-on-push": "error"
  }
}

Signals vs. RxJS: Wann was nutzen?

Signals verwenden für:

• Synchrone, lokale State-Verwaltung
• Component-interne Reaktivität
• Einfache Datenflüsse
• Performance-kritische Bereiche

RxJS beibehalten für:

• Komplexe asynchrone Operationen
• Event-Streams
• Fehlerbehandlung mit retry-Logik
• Bestehende Observable-basierte APIs

Debugging und Entwicklertools

Signals sind transparent und leicht zu debuggen:

// Development-Logging
const debugSignal = signal(0);
effect(() => {
  console.log('Debug:', debugSignal());
});

// Signal-Werte in DevTools inspizieren
console.log('Current value:', mySignal());

Häufige Fallstricke vermeiden

Fallstrick 1: Signals in Schleifen lesen

// Schlecht: Signal in jedem Durchlauf lesen
items().forEach((item) => processItem(item));

// Besser: Einmal lesen, dann verwenden
const currentItems = items();
currentItems.forEach((item) => processItem(item));

Fallstrick 2: Asynchroner Code in Computed Signals

// Schlecht: Async in computed
const badComputed = computed(async () => {
  return await fetch('/api/data'); // Funktioniert nicht!
});

// Besser: Resource API verwenden
const goodResource = resource({
  loader: () => fetch('/api/data').then((r) => r.json()),
});

Testing mit Angular Signals

Signals sind einfach zu testen:

describe('CartService', () => {
  let service: CartService;

  beforeEach(() => {
    service = new CartService();
  });

  it('should add items to cart', () => {
    const item = { id: '1', name: 'Test', price: 10 };

    service.addItem(item);

    expect(service.items()).toContain(item);
    expect(service.itemCount()).toBe(1);
    expect(service.total()).toBe(10);
  });
});

Fazit: Signals als Game-Changer

Angular Signals revolutionieren die Art, wie wir reaktive Anwendungen entwickeln. Sie bieten:

• Performance: Weniger Change Detection Cycles
• Einfachheit: Klare, verständliche API
• Zukunftssicherheit: Vorbereitung auf zoneless Angular
• Entwicklerfreundlichkeit: Weniger Boilerplate, mehr Produktivität

Die Migration zu Signals ist kein Sprint, sondern ein Marathon. Starte mit neuen Features, nutze die Migration-Schematics und arbeite dich Schritt für Schritt vor. Deine zukünftige Angular-App wird es dir danken - und deine Nutzer auch.

Mit Signals schreibst du nicht nur besseren Code, sondern baust die Grundlage für die nächste Generation von Angular-Anwendungen. Zeit, den Sprung zu wagen und die Macht der reaktiven Programmierung zu entfesseln.

Häufig gestellte Fragen

F: Ersetzen Signals komplett RxJS in Angular?

A: Nein, Signals und RxJS ergänzen sich. Signals eignen sich perfekt für synchrone, lokale State-Verwaltung, während RxJS weiterhin die beste Wahl für komplexe asynchrone Operationen bleibt. Die RxJS Interop Library ermöglicht eine nahtlose Integration beider Ansätze.

F: Wie aufwendig ist die Migration bestehender Angular-Apps zu Signals?

A: Die Migration kann schrittweise erfolgen. Angular bietet automatische Migration-Schematics für Inputs und Queries. Du kannst neue Features mit Signals entwickeln und bestehenden Code nach und nach umstellen, ohne die gesamte Anwendung neu schreiben zu müssen.

F: Verbessern Signals wirklich die Performance meiner Angular-App spürbar?

A: Ja, besonders bei größeren Anwendungen. Signals reduzieren Change Detection Cycles erheblich und ermöglichen fine-grained Updates. In Kombination mit OnPush Change Detection und der Vorbereitung auf zoneless Angular können Performance-Steigerungen von 30-50% erreicht werden.