toSignal & toObservable

Observable source       │       │  emits asynchronously       ▼toSignal internal value slot ← writes new value on each emission       │       │  reads synchronously       ▼Signal<T> (returned to caller) ← reactive graph can track reads here

Signal<T>       │       │  effect() watches the signal       ▼effect fires after signal settles → calls ReplaySubject(1).next(value)       │       │  subscribers receive via Observable       ▼Observable<T> (returned to caller) ← can be piped through RxJS operators

// Old pattern — manual subscription lifecycle management@Component({  changeDetection: ChangeDetectionStrategy.OnPush,})export class OldComponent implements OnInit, OnDestroy {  data: ApiData | null = null;  private sub = new Subscription();
  constructor(private api: ApiService, private cdr: ChangeDetectorRef) {}
  ngOnInit(): void {    this.sub = this.api.getData().subscribe(result => {      this.data = result;      this.cdr.markForCheck();  // manually notify CD    });  }
  ngOnDestroy(): void {    this.sub.unsubscribe();  // manually clean up  }}

import { Component, inject, computed } from '@angular/core';import { toSignal } from '@angular/core/rxjs-interop';import { interval } from 'rxjs';import { UserService } from './user.service';
@Component({  selector: 'app-ticker',  standalone: true,  template: `<p>Tick: {{ tick() }}</p>`,})export class TickerComponent {  // interval() never emits synchronously → signal starts as undefined  // initialValue prevents the undefined until first emission  tick = toSignal(interval(1000), { initialValue: 0 });}

// Strategy 1 — initialValue (most common for async sources)userData = toSignal(this.userService.getUser(), { initialValue: null });// Type: Signal<User | null>  — you handle the null in the template
// Strategy 2 — requireSync (for sources that ALWAYS emit synchronously)// Works with: BehaviorSubject, of(), startWith(), ReplaySubjectcount = toSignal(this.counterSubject$, { requireSync: true });// Type: Signal<number>  — no undefined possible
// Strategy 3 — no option (for sources where undefined makes sense)lastMessage = toSignal(this.websocket.messages$);// Type: Signal<Message | undefined>  — handle undefined explicitly

// Default: error rethrows on every read of the signalusers = toSignal(this.api.getUsers());
// Template reads users() → throws if the Observable errored// Catch in an error boundary or use rejectErrors to route to global handler
// rejectErrors: true → errors go to Angular's global error handler,// signal keeps returning the last successful valueusers = toSignal(this.api.getUsers(), { rejectErrors: true });

import { Component, Injector, inject } from '@angular/core';import { toSignal } from '@angular/core/rxjs-interop';
@Component({ /* ... */ })export class FlexibleComponent {  private injector = inject(Injector);
  // Called outside the constructor — needs explicit injector  loadUserData(userId: string) {    return toSignal(      this.userService.getUser(userId),      { injector: this.injector, initialValue: null }    );  }}

import { runInInjectionContext } from '@angular/core';
loadUserData(userId: string) {  return runInInjectionContext(this.injector, () =>    toSignal(this.userService.getUser(userId), { initialValue: null })  );}

import { Component, signal, computed } from '@angular/core';import { toObservable } from '@angular/core/rxjs-interop';import { debounceTime, switchMap } from 'rxjs';
@Component({  selector: 'app-search',  standalone: true,  template: `    <input (input)="query.set($any($event.target).value)" />    @for (result of results(); track result.id) {      <li>{{ result.name }}</li>    }  `,})export class SearchComponent {  query = signal('');  results = signal<SearchResult[]>([]);
  constructor(private search: SearchService) {    // Bridge signal → Observable to use RxJS operators    toObservable(this.query).pipe(      debounceTime(300),      switchMap(q => q ? this.search.search(q) : of([]))    ).subscribe(results => this.results.set(results));    // Note: for this specific pattern, httpResource + debounced() is cleaner in v22    // See signals.md for that approach  }}

import { Component, inject, computed } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { toSignal } from '@angular/core/rxjs-interop';import { map } from 'rxjs';import { httpResource } from '@angular/common/http';
@Component({  selector: 'app-product',  standalone: true,  template: `    @if (product.isLoading()) {      <app-spinner />    } @else if (product.hasValue()) {      <h1>{{ product.value().name }}</h1>      <p>Category: {{ categoryName() }}</p>    }  `,})export class ProductComponent {  private route = inject(ActivatedRoute);
  // Bridge route params Observable → signal  productId = toSignal(    this.route.paramMap.pipe(map(p => p.get('id') ?? '')),    { initialValue: '' }  );
  // Signal-based HTTP — driven by the productId signal  product = httpResource<Product>(() =>    this.productId() ? `/api/products/${this.productId()}` : undefined  );
  // Derive more signals from the product data  categoryName = computed(() =>    this.product.hasValue() ? this.product.value().category.name : '—'  );}

import { Component, signal, inject } from '@angular/core';import { toObservable } from '@angular/core/rxjs-interop';import { takeUntilDestroyed, DestroyRef } from '@angular/core/rxjs-interop';import { switchMap } from 'rxjs';
@Component({ /* ... */ })export class AnalyticsComponent {  activeTab = signal<'overview' | 'detail'>('overview');  private destroyRef = inject(DestroyRef);
  constructor(private analytics: AnalyticsService) {    toObservable(this.activeTab).pipe(      switchMap(tab => this.analytics.getTabData(tab)),      takeUntilDestroyed(this.destroyRef)    ).subscribe(data => this.updateChart(data));  }
  private updateChart(data: ChartData): void { /* ... */ }}

// Legacy service with BehaviorSubject@Injectable({ providedIn: 'root' })export class CartService {  private _items$ = new BehaviorSubject<CartItem[]>([]);  items$ = this._items$.asObservable();
  add(item: CartItem): void {    this._items$.next([...this._items$.value, item]);  }}
// Component uses toSignal — BehaviorSubject emits synchronously → no undefined@Component({ /* ... */ })export class CartComponent {  private cartService = inject(CartService);
  // requireSync: true because BehaviorSubject always has a value  items = toSignal(this.cartService.items$, { requireSync: true });  itemCount = computed(() => this.items().length);  total = computed(() =>    this.items().reduce((sum, item) => sum + item.price * item.qty, 0)  );}

@Component({ /* ... */ })export class MyComponent {  // ❌ The HTTP request fires on construction, not when the view renders  // If the component is created but never displayed, the request still fires  data = toSignal(    this.http.get('/api/data').pipe(      tap(() => console.log('Request fired!'))  // fires in constructor    ),    { initialValue: null }  );}

// ❌ Runtime error — HTTP is async, never emits synchronouslyusers = toSignal(this.http.get<User[]>('/api/users'), { requireSync: true });// Error: NG0601: toSignal() called with requireSync but Observable did not emit synchronously
// ✅ Use initialValue instead for async sourcesusers = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
// ✅ requireSync is safe for: BehaviorSubject, of(), startWith(), ReplaySubjectcount = toSignal(this.counter$, { requireSync: true });  // BehaviorSubject — safe

const counter = signal(0);const counter$ = toObservable(counter);
counter$.subscribe(v => console.log('Emitted:', v));
counter.set(1);counter.set(2);counter.set(3);// Logs: "Emitted: 3" — only once, not three times

// ❌ Memory leak — subscription never cleaned upngOnChanges(): void {  this.data = toSignal(this.api.get(this.id), {    manualCleanup: true,   // disables auto-cleanup    injector: this.injector,  });  // subscription lives until the Observable completes — possibly forever}
// ✅ Use explicit injector (auto-cleanup on component destroy)ngOnChanges(): void {  this.data = toSignal(this.api.get(this.id), {    injector: this.injector,   // auto-cleanup via injector's DestroyRef    initialValue: null,  });}