Explain how you can bridge Signals and RxJS observables using toSignal() and toObservable().

import { Component, signal, inject } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-interop',
  standalone: true,
  template: '<p>User: {{ user()?.name }}</p>'
})
export class InteropComponent {
  private http = inject(HttpClient);

  user = toSignal(this.http.get<{ name: string }>('/api/user/1'), {
    initialValue: { name: 'Loading...' }
  });

  counter = signal(0);
  counter$ = toObservable(this.counter);

  constructor() {
    this.counter$.subscribe(val => console.log('Counter changed to:', val));
  }
}