Convert Observables to Signals (Practical Integration)

Many apps fetch data using `HttpClient` (Observables) but want to use Signals in the UI. Angular supports this cleanly. ## Example: API Observable to Signal ```ts import { Component, computed } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { ProductsApi } from './products.api'; @Component({ selector: 'app-products', standalone: true, template: ` <h2>Products</h2> <p *ngIf="loading()">Loading...</p> <ul> <li *ngFor="let p of products()">{{ p.title }}</li> </ul> `, }) export class ProductsComponent { products = toSignal(this.api.getProducts(), { initialValue: [] }); loading = computed(() => this.products().length === 0); constructor(private api: ProductsApi) {} } ``` ## Why this is nice - no manual subscribe/unsubscribe - template reads like normal state: `products()` - works great with computed values ## Note on loading A real app should track loading based on request state, not only array length, but this is an easy beginner-friendly pattern. > Next: Advanced routing with resolvers, preloading, and nested routes.