Angular’s @angular/core/rxjs-interop package bridges Signals and RxJS in both directions. Use toSignal when signal-based code needs the latest value from an Observable; use toObservable when an RxJS pipeline needs to react to signal state. For Observable-backed loading and error state, consider rxResource. The key distinction is that these bridges carry different semantics: toSignal subscribes immediately and is tied to a lifecycle by default, while toObservable reports stabilized signal state asynchronously and can coalesce rapid writes.
Choose the bridge that matches the direction of your data
| Need | API | What it gives you |
|---|---|---|
| Read the latest value from an Observable as signal state | toSignal |
A signal updated from an Observable subscription. |
| Feed signal state into an RxJS pipeline | toObservable |
An Observable reflecting the signal’s latest stabilized state. |
| Model asynchronous state from an Observable | rxResource |
Resource-style value, loading, and error state. |
| Connect an Observable to a component or directive output | outputFromObservable |
An output that forwards Observable emissions. |
| Get an Observable view of a component or directive output | outputToObservable |
An Observable that represents output events. |
These APIs solve different integration problems; they are not interchangeable conversions. In particular, a signal represents readable current state, while an Observable can represent a sequence of notifications.
As an Amazon Associate I earn from qualifying purchases.
Convert an Observable to a signal with toSignal
toSignal subscribes to its source immediately and exposes the most recently emitted value through a signal. This is useful when a template or other signal consumer needs current state from an existing RxJS service. Because subscribing can trigger side effects, create the bridge deliberately and retain it rather than calling toSignal repeatedly for the same source.
readonly status = toSignal(this.statusService.status$, {
initialValue: 'loading',
});The signal must have a readable value even if its Observable has not emitted yet. Choose the initial-state option based on what the source actually guarantees:
#1 Best Overall
initialValuesupplies a meaningful value until the first emission. In the example, the signal begins as'loading'.- Without
initialValue, the signal’s value may beundefineduntil the Observable emits, which should be reflected in the type and consumer logic. requireSync: trueasserts that the source emits synchronously during subscription. Angular documents aBehaviorSubjectas an example. Use this only when that guarantee is real; if the source fails to emit synchronously, the assertion is violated.
The equal option lets you define when successive emitted values count as equal, suppressing signal updates for values considered unchanged.
Errors, completion, and subscription lifetime
If the Observable errors, reading the signal throws that error. If the Observable completes, the signal continues to return its last emitted value. By default, Angular cleans up the subscription when the injection context that created the signal—typically a component or service—is destroyed. An explicit injector can be provided when the call is made outside the default injection context.
manualCleanup disables automatic teardown; the subscription then remains until the Observable completes. Use it only when that lifetime is intentional. For ordinary component or service state, the default context-based cleanup usually matches the owner’s lifetime.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Convert a signal to an Observable with toObservable
toObservable monitors a signal using an effect and exposes its latest state to RxJS subscribers. It is useful when signal state should drive an RxJS operation, such as using switchMap to start work when a query changes.
Rank #3
readonly results$ = toObservable(this.query).pipe(
switchMap(query => this.searchService.search(query)),
);The timing matters. The initial value may be emitted synchronously if available, but later notifications are asynchronous because the effect runs asynchronously. If the signal is written several times before stabilization, the Observable can emit only the final value. Therefore this bridge is appropriate for reacting to stabilized state, not for recording every intermediate write as a synchronous event.
Like toSignal, toObservable normally needs an injection context. Supply an explicit injector when using it outside one.
Use rxResource for Observable-backed async state
When the goal is resource-style asynchronous state rather than simply converting between value interfaces, rxResource accepts a stream factory that returns an Observable. Angular calls the factory as resource parameters change, and the resulting resource follows the resource APIs for value, loading state, and errors.
The Observable returned by the stream factory must emit a value or an error before completing. A finite stream that completes without either does not meet that requirement. This is an important distinction when adapting one-shot or conditionally empty sources.
Connect component and directive outputs
For event integration, outputFromObservable forwards emissions from an Observable through a component or directive output. Angular stops forwarding when that component or directive is destroyed. The compiler gives this function special meaning, so declare it in a component or directive property initializer.
outputToObservable provides an Observable view of an output. If imperative event emission is all you need, Angular’s output() API can be used directly instead.
Version and stability
Current Angular API references mark toSignal and toObservable stable since Angular v20.0. Angular v18 documentation described RxJS interop as developer preview, so stability claims depend on the version being discussed. Check the API reference for the Angular version used by your application.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick Recap
Official documentation
- Angular RxJS interop with signals guide
- Angular
toSignalAPI reference - Angular
toObservableAPI reference - Angular output interop guide
- Angular v18 RxJS interop guide
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
