⚡ Angular Signals Deep Dive – Patterns für echte Reaktivität

(So entfesselst du das volle Potenzial von Angular Signals ab v16)

Angular Signals revolutionieren die Art, wie wir State & UI synchronisieren.
Kein RxJS? Kein Problem. Signals sind leichtgewichtig, synchron und präzise.

1️⃣ Was sind Signals?

Ein Signal ist ein reaktiver Wert, der automatisch seine Konsumenten aktualisiert:

const counter = signal(0);

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

2️⃣ Wann Signals statt RxJS?

Use Case	RxJS	Signals
UI-Reaktivität	👎 Overhead	✅ Top geeignet
Netzwerk-Streams	✅	👎 Nicht geeignet
DOM-gebundene Daten	👎 Boilerplate	✅ Kompakt
Globaler App-State	✅ via Store	✅ via SignalStore

3️⃣ Patterns mit Signals

🧱 Computed

const tax = computed(() => price() * 0.19);

🌀 Effect

effect(() => {
  if (isReady()) startApp();
});

🔄 Mutate

todos.update((list) => [...list, newTodo]);

4️⃣ Signals in Komponenten

@Component({
  standalone: true,
  template: `{{ counter() }}`,
})
export class CounterComponent {
  counter = signal(0);
}

Signals machen ChangeDetectionStrategy.OnPush obsolet – sie sind automatisch effizient.

5️⃣ Store + Signals = ❤️

Nutze SignalStore für:

Feature-Stores mit selektiven Updates
Kein select / pipe / subscribe nötig
Sofortige UI-Updates, ohne Overhead

Fazit

Signals sind nicht nur ein neues Spielzeug –
sie sind der neue Standard für reaktive Angular-Architektur.

👉 Nächster Beitrag:
🧪 Angular Unit Testing – Von Basics zu Best Practices