💡 Angular Signals Patterns – Computed, Effect & State für Profis

Angular Signals verändern, wie wir reaktiven State denken – leichtgewichtig, präzise und hoch performant.
Aber wie nutzt man sie richtig? Welche Patterns helfen dir wirklich?

In diesem Beitrag lernst du:

• Die 3 wichtigsten Signal-Typen (signal, computed, effect)
• Best Practices für App-Architektur
• Fallstricke und clevere Kombis

🧠 1. Signal: Der Reactive Primitive

readonly count = signal(0);

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

✅ Immer synchron
✅ Kein Subscription Management

🧮 2. Computed: Der reaktive Ableiter

readonly double = computed(() => this.count() * 2);

➡ Nur aktualisiert, wenn count() sich ändert
➡ Optimal für Derived State

⚡ 3. Effect: Reaktion auf Änderung

effect(() => {
  console.log('Wert geändert:', this.count());
});

➡ Ideal für Side Effects wie Logging, DOM-Updates, HTTP-Trigger

🧱 4. Architektur-Tipps

• 👉 Signals = lokaler State
• 👉 Computed = reaktives Mapping
• 👉 Effect = Nebenwirkungen, nicht Logik!

Kapselung per Service:

@Injectable({ providedIn: 'root' })
export class CounterStore {
  readonly count = signal(0);
  readonly double = computed(() => this.count() * 2);

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

➡ Ideal für Feature-Stores!

🚫 Fallstricke

• ❌ Niemals Signals für globale Shared-State verwenden → nutze SignalStore
• ❌ Kein effect() im Constructor → lieber in ngOnInit
• ❌ computed() ist nur für reinen, synchronen Zustand

🔄 Kombi-Tipp: RxJS + Signals

readonly query = signal('');
readonly results = toSignal(this.api.search(fromSignal(query)), { initialValue: [] });

➡ Signals für UI, RxJS für API – die perfekte Balance

✅ Fazit

Signals sind leichtgewichtig – aber mächtig:

• 🧠 Klarer State
• ⚡ Keine Subscriptions
• 🧱 Gut kombinierbar mit DDD, Stores & RxJS

📍 Bald im Blog: 📚 Angular Projektstart-Playbook – Setup, Struktur, Best Practices