4. Reactividad: Signals, RxJS y Change Detection

import { Component, signal } from '@angular/core';
@Component({
  selector: 'app-contador',
  template: `<p>Valor: {{ contador() }}</p><button (click)="incrementar()">+1</button>`,
})
export class ContadorComponent {
  // 1) CREAR. El tipo se infiere: WritableSignal<number>
  protected readonly contador = signal(0);
  // Con tipo explícito cuando el inicial no basta para inferirlo
  protected readonly tareas = signal<Tarea[]>([]);
  protected readonly seleccionada = signal<Tarea | null>(null);
  incrementar(): void {
    // 2) ESCRIBIR: set() reemplaza el valor
    this.contador.set(this.contador() + 1);
    // 3) ESCRIBIR: update() lo deriva del anterior. Es la forma preferida
    //    cuando el nuevo valor depende del actual: evita leer y escribir por separado.
    this.contador.update((v) => v + 1);
  }
  // 4) LEER: la llamada como función devuelve el valor actual
  esPar(): boolean {
    return this.contador() % 2 === 0;
  }
}

import { signal } from '@angular/core';
// Caso 1: el servidor devuelve un array nuevo en cada sondeo, pero con
// el mismo contenido. Sin 'equal', cada respuesta cambia la referencia
// y dispara todo el árbol de computed y de vistas que dependan de ella.
const filas = signal<Fila[]>([], {
  equal: (a, b) => a.length === b.length && a.every((x, i) => x.id === b[i].id),
});
// Caso 2: valores de coma flotante con tolerancia
const temperatura = signal(20.0, {
  equal: (a, b) => Math.abs(a - b) < 0.05,
});
// AVISO: 'equal' se ejecuta en CADA escritura. Si la comparación es más
// cara que el trabajo que evita, has empeorado el rendimiento.
// Con objetos grandes, una comparación estructural profunda casi nunca
// compensa; suele ser mejor normalizar el estado (ver 4.9).

import { Component, computed, signal } from '@angular/core';
@Component({ /* ... */ })
export class CarritoComponent {
  readonly lineas = signal<Linea[]>([]);
  readonly cupon = signal<Cupon | null>(null);
  readonly pais = signal('ES');
  // Cada computed depende solo de lo que lee. Angular lo descubre solo.
  readonly subtotal = computed(() =>
    this.lineas().reduce((t, l) => t + l.precio * l.cantidad, 0),
  );
  readonly descuento = computed(() => {
    const c = this.cupon();
    if (!c) return 0;                       // si no hay cupón, NO lee subtotal()
    return c.tipo === 'porcentaje'
      ? this.subtotal() * c.valor / 100
      : Math.min(c.valor, this.subtotal());
  });
  readonly baseImponible = computed(() => this.subtotal() - this.descuento());
  readonly iva     = computed(() => this.baseImponible() * tipoIva(this.pais()));
  readonly total   = computed(() => this.baseImponible() + this.iva());
  // Derivados de presentación: también son estado derivado
  readonly vacio       = computed(() => this.lineas().length === 0);
  readonly numArticulos = computed(() =>
    this.lineas().reduce((n, l) => n + l.cantidad, 0),
  );
}

import { Injectable, effect, signal, untracked } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class PreferenciasService {
  readonly tema = signal<'claro' | 'oscuro'>(leerTemaInicial());
  readonly consultaGuardada = signal('');
  constructor() {
    // 1) Efecto simple: estado reactivo -> API del navegador. Se ejecuta una
    //    vez al crearse y luego cada vez que cambia 'tema'.
    effect(() => {
      document.documentElement.dataset['theme'] = this.tema();
      localStorage.setItem('tema', this.tema());
    });
    // 2) Efecto con limpieza. onCleanup se ejecuta ANTES de la siguiente
    //    ejecución y también al destruir el efecto: ahí se cancelan
    //    temporizadores, escuchas y suscripciones.
    effect((onCleanup) => {
      const consulta = this.consultaGuardada();
      const id = setTimeout(() => this.guardarEnServidor(consulta), 800);
      onCleanup(() => clearTimeout(id));   // cancela el guardado anterior
    });
    // 3) Efecto que NO debe reaccionar a todo lo que lee: untracked() lee
    //    sin crear dependencia (ver 4.4.6).
    effect(() => {
      const t = this.tema();                       // SÍ es dependencia
      const u = untracked(() => this.usuario());   // NO es dependencia
      this.analitica.enviar('cambio_tema', { tema: t, usuario: u?.id });
    });
  }
}

export class PanelComponent implements OnInit {
  private readonly injector = inject(Injector);
  readonly filtro = signal('');
  ngOnInit(): void {
    // Sin la opción 'injector' esto lanzaría NG0203:
    // "effect() can only be used within an injection context".
    effect(() => console.log('filtro', this.filtro()), { injector: this.injector });
  }
  // Alternativa equivalente y más idiomática:
  //   runInInjectionContext(this.injector, () => effect(...));
}

import { Component, computed, input, linkedSignal, signal } from '@angular/core';
@Component({ /* ... */ })
export class SelectorTareaComponent {
  readonly tareas = signal<Tarea[]>([]);
  // FORMA CORTA: el valor se recalcula cada vez que cambia cualquier señal
  // leída en la función. Sigue siendo escribible con set()/update().
  readonly seleccionada = linkedSignal(() => this.tareas()[0] ?? null);
  // FORMA COMPLETA: separa la fuente del cálculo y da acceso al valor
  // anterior, lo que permite CONSERVAR la selección si sigue existiendo.
  readonly seleccionadaEstable = linkedSignal<Tarea[], Tarea | null>({
    source: this.tareas,
    computation: (tareasActuales, previo) => {
      // 'previo' es undefined la primera vez; después es
      // { source: valor anterior de la fuente, value: valor anterior de la señal }
      const anterior = previo?.value;
      const sigue = anterior && tareasActuales.some((t) => t.id === anterior.id);
      return sigue ? anterior : (tareasActuales[0] ?? null);
    },
  });
  // Un cambio en this.tareas() descarta la escritura manual y vuelve a
  // aplicar la 'computation'. Ese es justo el comportamiento deseado.
  elegir(t: Tarea): void { this.seleccionada.set(t); }
}

import { Component, input, resource } from '@angular/core';
@Component({
  selector: 'app-detalle-usuario',
  template: `
    @if (usuario.isLoading()) { <app-spinner /> }
    @else if (usuario.error()) {
      <p class="error">No se pudo cargar: {{ usuario.error() }}</p>
      <button (click)="usuario.reload()">Reintentar</button>
    } @else if (usuario.hasValue()) { <h2>{{ usuario.value()!.nombre }}</h2> }
  `,
})
export class DetalleUsuarioComponent {
  readonly usuarioId = input.required<number>();
  readonly usuario = resource({
    // 1) Parámetros reactivos: cuando cambian, se relanza la carga
    //    y se ABORTA automáticamente la petición anterior.
    params: () => ({ id: this.usuarioId() }),
    // 2) Cargador: recibe los parámetros y un AbortSignal.
    loader: async ({ params, abortSignal }) => {
      const r = await fetch(`/api/usuarios/${params.id}`, { signal: abortSignal });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return (await r.json()) as Usuario;
    },
  });
}

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

@Component({ /* ... */ })
export class TareasComponent {
  private readonly http = inject(HttpClient);
  readonly filtro = signal('');
  readonly pagina = signal(1);
  // rxResource acepta un Observable en lugar de una promesa. Es la puerta
  // natural para HttpClient: la cancelación de la petición anterior se
  // hace por des-suscripción, sin necesidad de AbortController.
  readonly tareas = rxResource({
    params: () => ({ q: this.filtro(), page: this.pagina() }),
    stream: ({ params }) =>
      this.http.get<Pagina<Tarea>>('/api/tareas', {
        params: { q: params.q, page: params.page },
      }),
  });
}

import { computed, effect, signal, untracked } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';

// ---------- untracked: leer SIN crear dependencia ----------
// Sin untracked, este efecto se reejecutaría también al cambiar el usuario,
// enviando eventos de analítica duplicados que nadie pidió.
effect(() => {
  const pagina = this.paginaActual();                   // dependencia real
  const usuario = untracked(() => this.usuario());      // solo lectura
  this.analitica.pagina(pagina, usuario?.id);
});
// También sirve para invocar métodos que leen muchas señales cuando solo
// te interesa reaccionar a una de ellas:
effect(() => {
  this.idSeleccionado();                                 // única dependencia
  untracked(() => this.recalcularTodoElPanel());
});
// ---------- toSignal: Observable -> Signal ----------
// Se suscribe al crearse y se da de baja solo cuando muere el contexto de
// inyección. Necesita saber qué valor tiene ANTES de la primera emisión.
readonly parametros = toSignal(this.route.queryParams, { initialValue: {} });
// ---------- toObservable: Signal -> Observable ----------
// Emite el valor actual y cada cambio posterior. Internamente usa un effect,
// así que también requiere contexto de inyección.
readonly filtro$ = toObservable(this.filtro);

import { Observable } from 'rxjs';
// El contrato: next* (error | complete)?
// Tras 'error' o 'complete' NO puede llegar nada más. Nunca.
const temporizador$ = new Observable<number>((subscriber) => {
  let n = 0;
  const id = setInterval(() => {
    subscriber.next(n++);                 // 0..n valores
    if (n > 4) subscriber.complete();     // notificación de fin
  }, 1000);
  // La función devuelta es la LÓGICA DE CANCELACIÓN: se ejecuta al
  // desuscribirse, al completar y al fallar. Aquí es donde se evitan
  // las fugas de memoria.
  return () => clearInterval(id);
});
// Nada ha ocurrido todavía. La suscripción es la que arranca el trabajo.
const sub = temporizador$.subscribe({
  next: (v) => console.log('valor', v),
  error: (e) => console.error('error', e),
  complete: () => console.log('completado'),
});
sub.unsubscribe();   // ejecuta clearInterval

import { of, from, fromEvent, interval, timer, defer, EMPTY, throwError } from 'rxjs';
// of: emite los argumentos SÍNCRONAMENTE y completa. Útil en tests y como
// valor de reserva dentro de catchError.
of(1, 2, 3);                       // 1, 2, 3, complete
// from: convierte cualquier iterable, promesa o array en observable.
from([1, 2, 3]);
from(fetch('/api/tareas'));        // promesa -> observable (NO cancelable de verdad)
// fromEvent: eventos del DOM como flujo. Registra el escuchador al suscribirse
// y lo quita al desuscribirse: sin fugas.
fromEvent<KeyboardEvent>(document, 'keydown');
// interval: cada N ms, empezando en N. timer: espera inicial y periodo opcional.
// Para sondeo, timer es casi siempre el correcto porque dispara de inmediato.
interval(1000);                    // 0 a los 1000 ms, 1 a los 2000 ms...
timer(0, 10_000);                  // 0 ya, 1 a los 10 s, 2 a los 20 s...
// defer: crea el observable EN EL MOMENTO DE SUSCRIBIRSE. Así se captura un
// valor "de ahora" en lugar de "de cuando se escribió el código".
const ahora$ = defer(() => of(Date.now()));
// EMPTY: completa sin emitir (NEVER, en cambio, no emite ni completa jamás).
// Es el sustituto habitual en catchError para tragarse el error y cerrar.
EMPTY;
// throwError: en RxJS 7 y posteriores requiere una FÁBRICA, no el error
// directo, para que la pila de llamadas se capture al suscribirse.
throwError(() => new Error('fallo controlado'));

import { shareReplay, share } from 'rxjs';
// PROBLEMA: cada suscriptor dispara su propia petición.
readonly config$ = this.http.get<Config>('/api/config');
// tres | async en la plantilla = tres peticiones HTTP
// SOLUCIÓN: multidifusión con caché del último valor.
readonly config$ = this.http.get<Config>('/api/config').pipe(
  shareReplay({ bufferSize: 1, refCount: true }),
);
// share() sin buffer: multidifusión sin recordar el último valor.
readonly eventos$ = this.socket.mensajes$.pipe(share());

import { map, scan, reduce, pairwise, bufferTime, toArray } from 'rxjs';
// map: transforma cada valor. El 90 % del uso diario.
this.http.get<RespuestaApi>('/api/tareas').pipe(
  map((r) => r.data.map(aModeloDeDominio)),
);
// scan: como reduce, pero emite el acumulado EN CADA valor.
// Es el operador para "estado que se construye poco a poco".
clics$.pipe(scan((total) => total + 1, 0));      // 1, 2, 3, 4...
// reduce: emite un único valor al COMPLETAR. Inútil en flujos infinitos.
lote$.pipe(reduce((acc, x) => acc + x.importe, 0));
// pairwise: emite [anterior, actual]. Ideal para detectar transiciones.
estado$.pipe(pairwise(), filter(([a, b]) => a !== 'error' && b === 'error'));
// NOTA: pluck('a', 'b') quedó obsoleto en RxJS 7 y se eliminó en la 8.
// Sustituto directo, además con mejor tipado:
usuario$.pipe(map((u) => u.direccion?.ciudad));

import {
  filter, debounceTime, throttleTime, auditTime, distinctUntilChanged,
  distinctUntilKeyChanged, take, takeUntil, takeWhile, first, skip,
} from 'rxjs';
// filter: deja pasar lo que cumple el predicado. Con un type guard, estrecha el tipo.
eventos$.pipe(filter((e): e is EventoCreado => e.tipo === 'creado'));
// debounceTime: espera a que haya SILENCIO durante N ms y emite el último valor.
// Es el operador del buscador: no dispara mientras el usuario teclea.
texto$.pipe(debounceTime(300));
// throttleTime: emite el primero y luego ignora durante N ms (scroll, resize).
// auditTime: al contrario, ignora N ms y emite el ÚLTIMO del intervalo.
scroll$.pipe(throttleTime(100));
raton$.pipe(auditTime(16));    // ~1 vez por fotograma
// distinctUntilChanged: ignora repeticiones CONSECUTIVAS. Sin él, un debounce
// deja pasar 'abc' -> borrar -> 'abc' como dos consultas idénticas.
texto$.pipe(distinctUntilChanged());
usuario$.pipe(distinctUntilKeyChanged('id'));
objeto$.pipe(distinctUntilChanged((a, b) => a.id === b.id && a.v === b.v));
// take(n): n valores y completa, lo que cancela la fuente. first(): el primero,
// pero LANZA EmptyError si el flujo completa sin emitir; take(1) es más seguro.
notificaciones$.pipe(take(5));
// takeUntil: corta cuando otro observable emite. Base del patrón clásico de
// cancelación, hoy reemplazado por takeUntilDestroyed en Angular.
sondeo$.pipe(takeUntil(this.destruido$));
// takeWhile: emite mientras se cumpla la condición; con inclusive: true emite
// también el valor que la rompe.
progreso$.pipe(takeWhile((p) => p < 100, true));
// skip: descarta los n primeros. Para ignorar el valor inicial de un
// BehaviorSubject o el primer valueChanges de un formulario.
form.valueChanges.pipe(skip(1));

import {
  combineLatest, forkJoin, merge, concat, zip, race,
  withLatestFrom, startWith, pairwise,
} from 'rxjs';
// combineLatest: emite cada vez que emite CUALQUIERA, con los últimos valores de
// todos. No emite hasta que TODOS hayan emitido al menos una vez. Es el
// "combinador de filtros" por excelencia.
combineLatest([this.texto$, this.categoria$, this.pagina$]).pipe(
  map(([q, cat, page]) => ({ q, cat, page })),
  switchMap((params) => this.api.buscar(params)),
);
// forkJoin: espera a que TODOS completen y emite el ÚLTIMO valor de cada uno.
// El Promise.all de RxJS: si uno falla, falla todo. Cuidado, con un observable
// que no completa, forkJoin no emite nunca.
forkJoin({
  usuario: this.api.usuario(id),
  permisos: this.api.permisos(id),
}).subscribe(({ usuario, permisos }) => { /* ... */ });
// merge: intercala emisiones de varias fuentes según llegan.
merge(this.creado$, this.editado$, this.borrado$).pipe(
  switchMap(() => this.api.recargar()),
);
// concat: reproduce las fuentes EN ORDEN; la siguiente empieza al completar
// la anterior. zip: empareja por índice, y si una fuente es más lenta la otra
// se acumula en memoria (poco frecuente en aplicaciones de gestión).
concat(this.cache$, this.red$);
zip(peticiones$, respuestas$);
// withLatestFrom: emite SOLO cuando emite el flujo principal, añadiendo el
// último valor de los secundarios. A diferencia de combineLatest, aquí manda
// el de la izquierda.
this.guardar$.pipe(
  withLatestFrom(this.formulario$, this.usuario$),
  switchMap(([, form, usuario]) => this.api.guardar(form, usuario.id)),
);
// startWith: inyecta un valor inicial. Imprescindible para que combineLatest
// arranque si alguna fuente aún no ha emitido.
this.categoria$.pipe(startWith('todas'));
// race: se queda con la primera fuente que emita y descarta el resto.
race(this.cacheRapida$, this.red$);

import { tap, delay, finalize, timeout, catchError, retry, EMPTY, of, timer, throwError } from 'rxjs';
// tap: efectos secundarios sin alterar el flujo (registro, indicadores). Acepta
// el objeto observador completo, que es más expresivo. finalize: se ejecuta
// SIEMPRE al terminar (éxito, error o cancelación); el sitio para el spinner.
this.api.buscar(q).pipe(
  tap({
    subscribe: () => this.cargando.set(true),
    error: (e) => this.logger.error(e),
  }),
  finalize(() => this.cargando.set(false)),
);
// timeout: falla si no llega un valor en el plazo indicado.
this.api.lento().pipe(
  timeout({ each: 5000 }),
  catchError((e) => (e.name === 'TimeoutError'
    ? of(RESPUESTA_POR_DEFECTO)
    : throwError(() => e))),
);
// catchError: intercepta el error y DEBE devolver un observable.
// Tres estrategias, según lo que quieras que ocurra:
this.api.tareas().pipe(
  catchError(() => of([])),        // 1) valor de reserva: el flujo continúa
  // catchError(() => EMPTY),      // 2) tragar y cerrar en silencio
  // catchError((e) => throwError(() => new Error('...', { cause: e }))), // 3) reenvolver
);
// retry con configuración (RxJS 7.4+): el retroceso exponencial correcto.
this.api.tareas().pipe(
  retry({
    count: 3,
    delay: (error, intento) => {
      // No reintentes errores del cliente: un 404 o un 400 no mejoran solos.
      if (error.status >= 400 && error.status < 500) throw error;
      const espera = Math.min(1000 * 2 ** (intento - 1), 10_000);
      return timer(espera + Math.random() * 200);   // backoff + jitter
    },
    resetOnSuccess: true,
  }),
);
// NOTA DE VERSIÓN: retryWhen quedó obsoleto en RxJS 7.8 y se eliminó en
// la 8. El objeto de configuración de retry lo sustituye por completo y
// es más legible. Si ves retryWhen en un tutorial, es código antiguo.

import { Component, DestroyRef, inject } from '@angular/core';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-panel',
  // 1) Lo mejor: sin suscripción explícita en ninguna parte
  template: `@for (t of tareas(); track t.id) { <p>{{ t.titulo }}</p> }`,
})
export class PanelComponent {
  private readonly destroyRef = inject(DestroyRef);
  // toSignal se suscribe y se da de baja solo. No hay nada que recordar.
  readonly tareas = toSignal(this.api.tareas$, { initialValue: [] as Tarea[] });
  constructor() {
    // 2) Cuando hace falta un efecto secundario real:
    //    takeUntilDestroyed usa el DestroyRef del contexto actual.
    //    En el constructor puede omitirse el argumento.
    this.eventos.notificaciones$
      .pipe(takeUntilDestroyed())
      .subscribe((n) => this.toast.mostrar(n));
  }
  ngOnInit(): void {
    // Fuera del constructor hay que pasar el DestroyRef explícitamente.
    this.socket.mensajes$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((m) => this.procesar(m));
  }
}

// 1) BUSCADOR: debounce + descarte de repetidos + cancelación
readonly texto = signal('');
readonly resultados = toSignal(
  toObservable(this.texto).pipe(
    map((t) => t.trim()),
    debounceTime(300),            // espera a que deje de teclear
    distinctUntilChanged(),       // no repitas la misma consulta
    filter((t) => t.length === 0 || t.length >= 2),
    switchMap((t) =>              // cancela la petición anterior
      t.length === 0
        ? of([])
        : this.api.buscar(t).pipe(catchError(() => of([]))),
    ),
  ),
  { initialValue: [] as Resultado[] },
);

// 2) AUTOGUARDADO: nada se pierde y todo va en orden
this.form.valueChanges.pipe(
  debounceTime(1000),
  distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
  concatMap((valor) =>             // COLA: respeta el orden de escritura
    this.api.guardarBorrador(valor).pipe(
      catchError(() => of({ error: true })),
    ),
  ),
  takeUntilDestroyed(),
).subscribe();

// 3) BOTÓN DE GUARDAR: antirrebote sin variables booleanas
private readonly enviar$ = new Subject<Formulario>();
readonly enviando = signal(false);
constructor() {
  this.enviar$.pipe(
    exhaustMap((datos) => {        // ignora clics mientras haya uno en curso
      this.enviando.set(true);
      return this.api.crear(datos).pipe(
        finalize(() => this.enviando.set(false)),
        catchError((e) => { this.error.set(e.message); return EMPTY; }),
      );
    }),
    takeUntilDestroyed(),
  ).subscribe((creado) => this.router.navigate(['/tareas', creado.id]));
}

// 4) POLLING: sondeo que se detiene cuando la pestaña no está visible
readonly estado = toSignal(
  fromEvent(document, 'visibilitychange').pipe(
    startWith(null),
    switchMap(() =>
      document.hidden
        ? EMPTY                                     // pestaña oculta: no sondees
        : timer(0, 10_000).pipe(                    // ya, y luego cada 10 s
            switchMap(() => this.api.estado().pipe(catchError(() => EMPTY))),
          ),
    ),
  ),
);

// 5) REINTENTO CON RETROCESO EXPONENCIAL (ver 4.6.5)
this.api.critico().pipe(
  retry({
    count: 4,
    delay: (err, n) => timer(Math.min(500 * 2 ** (n - 1), 8000)),
  }),
);

// 6) CANCELAR AL NAVEGAR: switchMap sobre los parámetros de ruta
readonly detalle = toSignal(
  this.route.paramMap.pipe(
    map((p) => Number(p.get('id'))),
    filter((id) => Number.isFinite(id)),
    distinctUntilChanged(),
    switchMap((id) => this.api.detalle(id)),   // al cambiar de id, aborta
  ),
);

import { toSignal, toObservable } from '@angular/core/rxjs-interop';
// 1) initialValue: el tipo resultante es Signal<T>.
//    Es la opción recomendada en el 90 % de los casos.
readonly tareas = toSignal(this.api.tareas$, { initialValue: [] as Tarea[] });
// 2) Sin opciones: el tipo es Signal<T | undefined>.
//    Correcto y honesto: antes de la primera emisión NO hay valor.
//    Obliga a contemplar el caso undefined en la plantilla, que es
//    exactamente lo que debe ocurrir.
readonly usuario = toSignal(this.api.usuario$);   // Signal<Usuario | undefined>
// 3) requireSync: el tipo es Signal<T> SIN valor inicial, porque afirmas
//    que la fuente emite de forma síncrona al suscribirse (BehaviorSubject,
//    of(), startWith()). Si no emite al instante, error NG0601 en runtime.
readonly config = toSignal(this.configSubject$, { requireSync: true });
// 4) manualCleanup: la suscripción NO se cancela al destruirse el contexto.
//    Solo para flujos verdaderamente globales cuyo ciclo de vida gestionas tú.
//    Úsalo con mucha cautela: es una fuga en potencia.
readonly reloj = toSignal(timer(0, 1000), { initialValue: 0, manualCleanup: true });
// 5) rejectErrors: por defecto, un error del observable se relanza al leer
//    la señal. Con rejectErrors: true se propaga como error no capturado y
//    la señal conserva el último valor bueno.
// ---------- toObservable ----------
// Internamente crea un effect, así que necesita contexto de inyección.
// Emite el valor actual al suscribirse y después cada cambio, agrupando
// (no garantiza una emisión por cada set()).
readonly filtro$ = toObservable(this.filtro);

import { Component, ElementRef, NgZone, inject, signal } from '@angular/core';
@Component({ /* ... */ })
export class MapaComponent implements AfterViewInit {
  private readonly zone = inject(NgZone);
  private readonly host = inject(ElementRef<HTMLElement>);
  readonly coordenadas = signal({ x: 0, y: 0 });
  ngAfterViewInit(): void {
    // Sin runOutsideAngular, cada mousemove (cientos por segundo)
    // dispararía un tick completo. Con OnPush y Default por igual.
    this.zone.runOutsideAngular(() => {
      this.host.nativeElement.addEventListener('mousemove', (e) => {
        this.dibujarCursor(e);            // trabajo puro de canvas, sin Angular
        if (e.buttons === 1) {
          // Y cuando SÍ hay que actualizar la interfaz, se vuelve a entrar.
          // Con señales ni siquiera hace falta: escribir la señal ya notifica.
          this.zone.run(() => this.coordenadas.set({ x: e.clientX, y: e.clientY }));
        }
      });
    });
  }
}

@Component({ changeDetection: ChangeDetectionStrategy.OnPush, /* ... */ })
export class CotizacionesComponent implements OnInit {
  private readonly cdr = inject(ChangeDetectorRef);
  precios: Precio[] = [];
  ngOnInit(): void {
    // Llegan 200 mensajes por segundo. Comprobar el árbol 200 veces
    // por segundo es inviable: desenganchamos y refrescamos a 20 fps.
    this.cdr.detach();
    this.socket.precios$
      .pipe(bufferTime(50), takeUntilDestroyed(this.destroyRef))
      .subscribe((lote) => {
        this.precios = fusionar(this.precios, lote);
        this.cdr.detectChanges();     // una sola comprobación por lote
      });
  }
}
// Con señales el mismo resultado se consigue sin tocar el
// ChangeDetectorRef: basta con escribir la señal cada 50 ms.

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    // ...
  ],
};
// NOMBRE SEGÚN LA VERSIÓN:
//   v18 y v19  -> provideExperimentalZonelessChangeDetection()
//   v20 y post -> provideZonelessChangeDetection()  (estable)
// Comprueba cuál exporta tu versión antes de copiar esto.
// Además hay que eliminar zone.js del proyecto:
//   angular.json  -> quitar "zone.js" de "polyfills" en build y test
//   package.json  -> se puede desinstalar cuando ya no lo use nada
//   src/polyfills.ts (proyectos antiguos) -> borrar import 'zone.js';

import { Injectable, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

export type EstadoCarga = 'inactivo' | 'cargando' | 'listo' | 'error';
export interface Filtros { texto: string; estado: 'todas' | 'pendientes' | 'hechas'; }
@Injectable({ providedIn: 'root' })
export class TareasStore {
  private readonly http = inject(HttpClient);

  // ---------- ESTADO PRIVADO: la única fuente de verdad ----------
  // Normalizado: un mapa por id, más el orden aparte. Ver 4.9.3.
  private readonly _porId = signal<ReadonlyMap<number, Tarea>>(new Map());
  private readonly _orden = signal<readonly number[]>([]);
  private readonly _carga = signal<EstadoCarga>('inactivo');
  private readonly _error = signal<string | null>(null);
  private readonly _filtros = signal<Filtros>({ texto: '', estado: 'todas' });

  // ---------- API PÚBLICA: solo lectura y derivados ----------
  readonly carga = this._carga.asReadonly();
  readonly error = this._error.asReadonly();
  readonly filtros = this._filtros.asReadonly();
  readonly tareas = computed<readonly Tarea[]>(() => {
    const mapa = this._porId();
    return this._orden().map((id) => mapa.get(id)!).filter(Boolean);
  });
  readonly visibles = computed(() => {
    const { texto, estado } = this._filtros();
    const q = texto.trim().toLowerCase();
    return this.tareas().filter((t) =>
      (q === '' || t.titulo.toLowerCase().includes(q)) &&
      (estado === 'todas' || (estado === 'hechas') === t.hecha),
    );
  });
  readonly pendientes = computed(() => this.tareas().filter((t) => !t.hecha).length);
  readonly vacio = computed(() => this._carga() === 'listo' && this.tareas().length === 0);
  readonly sinResultados = computed(() => this.tareas().length > 0 && this.visibles().length === 0);

  // ---------- COMANDOS: las únicas escrituras ----------
  filtrar(parcial: Partial<Filtros>): void {
    this._filtros.update((f) => ({ ...f, ...parcial }));
  }
  async cargar(): Promise<void> {
    this._carga.set('cargando');
    this._error.set(null);
    try {
      const tareas = await firstValueFrom(this.http.get<Tarea[]>('/api/tareas'));
      this._porId.set(new Map(tareas.map((t) => [t.id, t])));
      this._orden.set(tareas.map((t) => t.id));
      this._carga.set('listo');
    } catch (e) {
      this._error.set(mensajeDeError(e));
      this._carga.set('error');
    }
  }

  // ACTUALIZACIÓN OPTIMISTA: pintamos el cambio de inmediato y
  // revertimos si el servidor lo rechaza. La interfaz se siente instantánea.
  async alternarHecha(id: number): Promise<void> {
    const anterior = this._porId().get(id);
    if (!anterior) return;
    this.aplicar(id, { ...anterior, hecha: !anterior.hecha });   // 1) optimista
    try {
      const guardada = await firstValueFrom(
        this.http.patch<Tarea>(`/api/tareas/${id}`, { hecha: !anterior.hecha }),
      );
      this.aplicar(id, guardada);                                 // 2) confirmación
    } catch (e) {
      this.aplicar(id, anterior);                                 // 3) reversión
      this._error.set('No se pudo guardar el cambio. Se ha deshecho.');
    }
  }
  // Escritura inmutable puntual: nuevo Map, nunca mutación del anterior.
  private aplicar(id: number, tarea: Tarea): void {
    this._porId.update((m) => new Map(m).set(id, tarea));
  }
}