11. Working with RxJS (Observables) - Deep Dive

A simple Angular starter project is used to experiment with RxJS observables (not building a full demo app).

Recap: BehaviorSubject is a special RxJS “subject” that you manually emit values into; it’s an observable-like stream used to broadcast values to subscribers (somewhat comparable to Angular Signals, with differences to be discussed).

Observables can also be created without subjects using RxJS creation functions, e.g. interval().

In AppComponent, implement OnInit and create an observable via interval(1000), which automatically emits incrementing numbers every second.

To make an observable actually run, you must subscribe; without subscribers, RxJS won’t emit values.

subscribe() accepts an observer with up to three handlers: next (per value), error, and complete (often never called for interval() since it runs indefinitely). The example only uses next to log values.

Important best practice: store the subscription and unsubscribe on component destroy to prevent memory leaks. The example uses Angular’s DestroyRef (injected via inject) to run cleanup and call unsubscribe() when the component is removed.

Recap of Observables: created an observable with interval() and added operators; observables typically have an automatic data source that emits values over time.

Recap of Subjects: subjects are a special kind of observable where you both subscribe and manually emit values (you control when new values are produced), and they can be subscribed to in multiple places/components.

Introduction of Angular Signals (built into Angular, not from RxJS): the lesson shifts to using a signal and comparing it to observables/subjects, including converting between signals and observables.

Implementation shown:

Result: initial state logs “Clicked button 0 times”; each click updates both the UI and the console via the signal/effect.

Transition question: signals behave like a data stream you manually “push” updates into (similar to a subject), prompting a discussion of differences and similarities between signals and observables.

Observables = values over time (streams): You must subscribe to receive emitted values, and emissions typically happen asynchronously. They’re well-suited for events and data sources like interval(). Many observables are lazy and only start producing values when there’s at least one subscriber.

Signals = value containers: They hold a current value (with an initial value) that you can read synchronously at any time without subscribing. Reactivity happens automatically when signals are read in templates, computed, or effect. They’re especially good for application state that starts with an initial value and changes over time.

To listen to a signal via RxJS, use Angular’s toObservable from @angular/core/rxjs-interop.

Pass the signal itself (don’t call/execute it) into toObservable, e.g. convert clickCount into an observable.

toObservable should be used in places where DI is allowed (e.g. constructor or as a property initializer).

A common convention is naming observable properties with a trailing $, e.g. clickCount$.

After conversion, you can subscribe() (e.g. in ngOnInit) and handle new values in next; TypeScript infers the emitted type (here number).

As with any subscription, store it and unsubscribe (e.g. in ngOnDestroy) to avoid leaks.

Updating the original signal still works; each update also emits a new value through the observable created by toObservable, allowing logging/reacting via RxJS on each click.

Shows converting an RxJS interval(1000) observable (named with $) into an Angular Signal using toSignal() from @angular/core/rxjs-interop, typically when defining class properties or in the constructor (where injection is possible).

The resulting Signal updates whenever the observable emits and can be used like any other Signal: in templates, effect(), or computed().

Key difference: observables (like interval) have no initial value, while Signals always do. Therefore, a Signal created via toSignal() starts as undefined unless configured.

You can provide an explicit initial value by passing a second argument to toSignal() with a config object, e.g. { initialValue: 0 }, so the template shows 0 immediately.

toSignal() automatically manages subscription cleanup when the hosting component is destroyed. This can be disabled with { manualCleanup: true }, in which case you must handle disposal yourself.

Demonstrates how to create an RxJS Observable from scratch by instantiating the Observable class (instead of using creation operators like interval), explaining that built-in operators use this class internally.

The Observable constructor takes a function that RxJS runs when someone subscribes. This function receives a subscriber/observer object.

Inside the constructor function, you control emissions by calling:

Example implementation uses native JavaScript setInterval to emit a value every 2 seconds (and optionally logs "Emitting new value…​"), then subscribes in ngOnInit to print received values.

Shows how to stop an infinite observable: track a counter, clear the interval via clearInterval(intervalId), call complete(), and optionally handle completion in the subscriber with a complete callback (e.g., logging "COMPLETED!").

Concludes with the key concept: subscriptions define what happens when events occur, while the Observable’s constructor logic defines when those events are emitted (next/complete/error), which is essentially how Observables work “under the hood.”