httpResource: datos declarativos con señales

Todo lo que hiciste a mano en las lecciones anteriores —pedir, manejar los tres estados, recargar cuando cambia un parámetro— Angular moderno lo empaqueta en una sola herramienta declarativa: httpResource. En pocas líneas obtienes los datos como señal, con isLoading, error y recarga automática cuando cambian sus dependencias. Es el resource() que viste en el módulo de signals, especializado para HTTP. Hoy cierras la teoría del módulo con la forma más moderna de cargar datos.

El asistente que hace todo el ritual

httpResource básico

import { Component } from '@angular/core';
import { httpResource } from '@angular/common/http';

@Component({
selector: 'app-lista-gastos',
template: `
  @if (gastosRes.isLoading()) {
    <p>Cargando…</p>
  } @else if (gastosRes.error()) {
    <p role="alert">No se pudieron cargar los gastos.</p>
  } @else {
    <ul>
      @for (g of gastosRes.value(); track g.id) { <li>{{ g.nombre }}</li> }
    </ul>
  }
`,
})
export class ListaGastosComponent {
// una línea: pide, maneja estados y expone señales
readonly gastosRes = httpResource<Gasto[]>(() => '/api/gastos');
}

httpResource te da un objeto con señales listas para el template:

• isLoading() — true mientras carga.
• error() — el error si la petición falló.
• value() — los datos cuando llegan.
• reload() — método para recargar a mano.

Todo el patrón de estados de las lecciones anteriores, en una línea. Y como son señales, encajan con computed y effect sin toSignal de por medio.

Recarga reactiva: cuando la URL depende de una señal

Lo poderoso: si la petición depende de una señal, httpResource RECARGA sola cuando esa señal cambia. La función que pasas se re-evalúa reactivamente:

export class DetalleGastoComponent {
id = input.required<string>();   // parámetro de la ruta como señal

// cuando 'id' cambia (navegas a otro gasto), httpResource recarga solo
readonly gastoRes = httpResource<Gasto>(() => `/api/gastos/${this.id()}`);
}

Navegas de /gasto/5 a /gasto/8, id() cambia, la función de la URL se re-evalúa, y httpResource dispara la nueva petición y actualiza sus señales. Sin switchMap, sin suscripciones: la reactividad de señales aplicada a datos remotos.

Antes (todo a mano) vs Ahora (httpResource)

Cuándo httpResource y cuándo RxJS a mano

Mini-reto

Reescribe con httpResource un componente que hoy carga a mano: una lista de gastos filtrada por una señal categoria. Escribe: 1) la señal categoria; 2) el httpResource cuya URL use this.categoria() en un query param; 3) el template con @if sobre isLoading/error/value. Explica qué pasa al cambiar categoria y por qué no necesitas switchMap.

Qué sigue

Cierras el módulo de datos: peticiones, estados, interceptores, caché y httpResource. Tienes todo para conectar "Mi Bolsillo" con un backend real. El reto del módulo lo consolida: vas a construir la capa de datos completa —un servicio de API con caché e invalidación—, con la lógica probada en vivo. La columna vertebral de datos de tu app.