rxjs-vs-signals

RxJS vs Angular Signals

When writing reactive code in an Otter workspace, choosing the right primitive — Angular Signals or RxJS Observables — impacts readability, performance, and consistency. Use this decision guide to pick the correct approach for each situation.

Decision Tree

What is the nature of the reactive data?
│
├── Synchronous derived state (template binding, computed values)
│   └── Use SIGNALS (signal, computed, input, model)
│
├── Asynchronous streams (HTTP, WebSocket, timers, multi-value over time)
│   └── Use RxJS OBSERVABLES
│
├── Event coordination (debounce, throttle, switchMap, retry, race)
│   └── Use RxJS OBSERVABLES
│
├── NgRx Store selection
│   └── Use RxJS OBSERVABLES (store.select() returns Observable)
│       └── Bridge with toSignal() ONLY at the component boundary for template binding
│
├── Component inputs / outputs
│   └── Use SIGNALS (input(), output(), model())
│
├── Otter configuration
│   └── Use SIGNALS (configSignal) — preferred for new components
│       └── Observable (ConfigurationObserver) still supported for existing code
│
└── Unsure?
    └── Start with SIGNALS for simple state; escalate to RxJS when you need operators

Signals: When and How

Use Angular Signals when:

• The value is synchronous and changes over time (component state, form state, UI flags)
• You need derived/computed state from other signals
• The value is consumed primarily in templates (signals eliminate the need for async pipe)
• You are defining component inputs (input(), input.required())
• You are working with Otter configuration in new components (configSignal())

Signal Patterns

// Simple writable state
protected readonly isExpanded = signal(false);

// Computed derived state
protected readonly displayLabel = computed(() =>
  this.isExpanded() ? this.fullLabel() : this.shortLabel()
);

// Component input
public readonly title = input.required<string>();

// Otter configuration (preferred for new components)
public readonly config = input<Partial<MyConfig>>();
@O3rConfig()
public readonly configSignal = configSignal(this.config, MY_CONFIG_ID, MY_DEFAULT_CONFIG);