🧠 Angular Signals – Computed, Effect & Reactive Thinking

(Warum Signals die Zukunft der State-Logik in Angular sind – und wie du sie meisterst)

Angular Signals bringen kontrollierte Reaktivität ins Spiel – ohne Overhead, ohne Boilerplate.
Sie sind performanter als RxJS, intuitiver als BehaviorSubjects und kompatibel mit modernen Patterns.

1️⃣ Was sind Signals?

const counter = signal(0);

✅ Eine reaktive State-Variable, die automatisch Updates triggert
✅ Lesbar & setzbar wie normale Variablen – aber voll reaktiv

2️⃣ Computed Signals

const double = computed(() => counter() * 2);

✅ Memoisiert & nur bei Änderung neu berechnet
✅ Kein manuelles subscribe oder combineLatest nötig

3️⃣ Effect Signals

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

✅ Reaktive Side Effects, z. B. für Logging, Analytics oder DOM-Updates

4️⃣ Signals vs. RxJS

Feature	Signals ✅	RxJS 🌀
Einfach zu lesen	✅	❌
Boilerplate-frei	✅	❌
Stream-Handling	❌	✅
Reaktiv im Template	✅	🔄 (via pipe)

👉 Kombiniere beide – RxJS für Streams, Signals für State!

5️⃣ Best Practices

Signals als state nutzen, RxJS für async streams
Computed Signals für abgeleiteten Zustand
Effect Signals sparsam, gezielt für Seiteneffekte
Signals in Stores, nicht im DOM direkt mutieren

Fazit

Signals revolutionieren, wie wir State und Reaktivität denken.
Sie sind der Sweet Spot zwischen Performance, Eleganz & Klarheit.

👉 Nächster Beitrag:
🧠 Angular Zone-Free – Vollständig zonenlos entwickeln?