How to convert an observable to a signal?
To convert an Observable into a signal, you use the toSignal() function from @angular/core/rxjs-interop.
Example:
ts
import { Component } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';
@Component({
selector: 'app-timer',
template: `
<p>Counter: {{ time() }}</p>
`
})
export class TimerComponent {
// Observable, emits a new number every second
source$ = interval(1000);
// Convert Observable → Signal
time = toSignal(this.source$, { initialValue: 0 });
}What toSignal() does:
- creates a signal that automatically updates on every new value from the Observable;
initialValueis a required parameter, for while the stream has not yet emitted its first value;- Angular manages the subscription and unsubscription itself, nothing needs to be done manually.
Summary: toSignal() turns an RxJS stream into an ordinary signal that can be used in a template without an async pipe.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.