⚡ Signals + RxJS – Best of both worlds für reactive Power

Angular hat mit Signals einen riesigen Schritt gemacht.
Aber: RxJS bleibt relevant – vor allem für externe Streams, Events & komplexe Abhängigkeiten.

In diesem Beitrag zeige ich dir:

• Wann du Signals nimmst
• Wann RxJS die bessere Wahl ist
• Und wie du beides clever kombinierst

🔁 1. Signals = State, RxJS = Streams

➡ Nutze Signals für App-internen UI-State
➡ Nutze RxJS für alles, was von außen kommt

⚙️ 2. Beispiel: Signal + RxJS Subscription

readonly count = signal(0);

interval(1000).subscribe(() => {
  this.count.update(c => c + 1);
});

➡ Kombiniert UI-State (Signal) mit externem Stream (RxJS)

🧠 3. Observable to Signal

readonly users$ = this.api.getUsers();

readonly users = toSignal(this.users$, { initialValue: [] });

➡ toSignal() konvertiert Observable in reaktiven Signal-State

🔄 4. Signal to Observable

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

readonly input = signal('');
readonly input$ = fromSignal(input);

➡ Ideal, wenn du input$ in einem pipe() brauchst (z. B. debounce, distinctUntilChanged)

🧪 5. Combine the best

combineLatest([
  fromSignal(this.query),
  this.api.getItems()
]).pipe(
  map(([query, items]) => items.filter(i => i.name.includes(query)))
);

➡ Kombination von imperativem UI-State (Signals) und asynchronen Datenquellen

✅ Fazit

Nutze das Beste aus beiden Welten:

• Signals für lokalen UI-State, Computations, Performance
• RxJS für externe Daten, Streams, Event-Pipelines

Wenn du beides verstehst – hast du Angular-Reactiveness gemeistert.

📍 Bald im Blog: 📚 Angular Knowledge Graph – wie du dein Team skalierst, ohne die Kontrolle zu verlieren