iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s @angular/core/rxjs-interop package bridges signals and RxJS in both directions. Use toSignal to read the latest value of an Observable as signal state, toObservable to feed signal state into an RxJS pipeline, and rxResource when an Observable should provide a resource’s asynchronous state. The key distinction is that these APIs do not make streams and signals behave identically: subscriptions have side effects and lifetimes, while signal-to-Observable updates are mediated by an effect and can be coalesced.
Choose the bridge that matches your data flow
| What you have | What you need | API |
|---|---|---|
| An Observable, such as a service stream | Current value that templates or other signal consumers can read | toSignal |
| A signal holding state | An Observable for RxJS operators such as switchMap |
toObservable |
| An Observable supplying asynchronous resource data | Resource-style value, loading, and error state | rxResource |
| A component or directive output | Connect an output and an Observable | outputFromObservable or outputToObservable |
These are integration options, not a general performance ranking of signals versus RxJS. Choose based on whether you need current state, stream notifications, resource state, or event-output integration. See Angular’s RxJS interop guide.
Convert an Observable to a signal with toSignal
toSignal(source$) subscribes to the Observable immediately and returns a signal containing its most recently emitted value. This is useful when a component or service already exposes an Observable but a signal consumer needs a synchronous read interface. Because subscribing can trigger side effects, create the bridge deliberately and reuse it rather than invoking toSignal repeatedly for the same source.
Choose an initial value that matches the source
A signal can be read before an Observable has emitted, so decide what that read should mean:
#1 Best Overall
- Set
initialValuewhen a meaningful placeholder exists. The signal returns it until the source emits. - Omit
initialValuewhen no placeholder is appropriate; the signal’s value can beundefinedbefore the first emission. - Use
requireSync: trueonly if the Observable is guaranteed to emit synchronously upon subscription. Angular givesBehaviorSubjectas an example. This asserts a runtime condition and removesundefinedfrom the resulting value type.
For example, a stream that may emit later needs an initial state or code that handles the pre-emission undefined. Do not use requireSync merely to simplify a type if the source might emit asynchronously.
Understand teardown and repeated subscriptions
By default, toSignal ties its subscription to the injection context where it is created, such as a component or service; Angular cleans it up when that context is destroyed. The function expects an injection context unless you provide an explicit injector. The manualCleanup option disables automatic teardown, allowing the subscription to persist until the Observable completes. Use it only when that lifetime is intentional.
Each call creates a subscription. Keep the returned signal in a field or otherwise retain it for the intended lifetime; do not put toSignal in code that is repeatedly evaluated if that would create repeated subscriptions. The optional equal function can treat successive emitted values as equal and suppress corresponding signal updates.
Know how errors and completion appear
If the source errors, toSignal throws that error when the signal is read. If the source completes, the signal continues returning its latest value; completion does not erase the state.
See Angular’s toSignal API reference for the current options and signatures.
Convert a signal to an Observable with toObservable
toObservable(signal) monitors a signal with an effect and exposes its state as an RxJS Observable. Use it when signal state should drive an RxJS operation—for example, a search query signal feeding a request pipeline with switchMap. Like toSignal, it normally needs an injection context; provide an injector when calling it outside one.
Rank #3
Expect asynchronous updates and coalescing
The initial value, when available, may be delivered synchronously. Later notifications are asynchronous because the effect runs asynchronously. If a signal is written several times before Angular stabilizes the effect, subscribers may receive only the final stabilized value—not a notification for every intermediate write.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteThat makes toObservable appropriate for reacting to current state, but not for recording every synchronous write as an event. Angular’s guide notes that signals do not provide synchronous notifications of changes. If each occurrence matters independently, model it as an event stream rather than assuming this state bridge preserves every write.
Consult Angular’s toObservable API reference for its current behavior and options.
Use rxResource for Observable-backed resource state
rxResource adapts an Observable to Angular’s resource pattern. Its stream factory returns an Observable and is called as resource parameters change; the resource interface follows Angular’s resource APIs for value, loading state, and errors. This is a better fit when the consumer needs resource-style asynchronous state than when it simply needs a signal view of an existing stream.
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 this documented requirement. See the Angular interop guide for the resource API details.
Connect component outputs and Observables
For component and directive events, outputFromObservable makes an output emit based on an Observable; Angular stops forwarding when the component or directive is destroyed. It has compiler-recognized meaning and belongs in a component or directive property initializer. Conversely, outputToObservable exposes an output as an Observable. If imperative output emission is all that is needed, Angular’s guide suggests using output() directly.
These output helpers solve event integration, rather than converting general signal state. Details are in Angular’s component and directive output interop guide.
Check Angular version when relying on stability labels
Angular’s current API references label toSignal and toObservable stable since v20.0. The Angular v18 guide described RxJS interop as developer preview, so older version-specific documentation may use a different stability label. Check the documentation and API for the Angular version your application uses; the v18 guide is available at Angular v18 RxJS Interop.
Quick Recap
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.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
