Actualizar tareas en Angular con Signals requiere un enfoque inmutable que cree un nuevo estado en lugar de mutar el array original. Aquí aprenderás a construir un método updateTask reactivo, ideal para desarrolladores que ya manejan señales y quieren aplicar buenas prácticas en aplicaciones modernas.
¿Cómo depurar el estado de un array de tareas en Angular?
Antes de escribir la lógica de actualización, conviene visualizar el estado actual de tu lista. Angular tiene un truco simple para esto.
Usa las etiquetas <pre> y <code> de HTML junto con el pipe json. Te suscribes a la señal y aplicas el pipe directamente en el render, lo que imprime el array como JSON formateado en pantalla.
¿Qué hace el pipe json en Angular? Transforma cualquier objeto o array en una cadena JSON legible dentro del template, perfecto para depurar el estado en tiempo real sin abrir la consola.
Este paso te da una ventana al estado interno y te permite confirmar que cada cambio en la señal se refleja como esperas [00:13].
¿Por qué usar inmutabilidad al actualizar arrays con Signals?
La tentación es ir directo a la posición del array y reasignar el valor: tasks[0] = nuevoValor. Funciona, pero muta el array original, y eso choca con el paradigma que Angular promueve junto a Signals [01:25].
La programación inmutable no cambia el array existente, crea uno nuevo cada vez. Esto facilita la detección de cambios, hace tu código más predecible y evita efectos secundarios difíciles de rastrear.
Por eso, en lugar de mutar, vas a generar un algoritmo que devuelva un estado nuevo cada vez que actualices una tarea.
¿Cómo construir el método updateTask con map y Signals?
El método updateTask recibe la posición (index) de la tarea que quieres modificar. Dentro accedes a la señal tasks y ejecutas su método update, que recibe el estado anterior en una arrow function [02:00].
Como el algoritmo es más extenso que en otras operaciones, debes escribir explícitamente la palabra return. La estrategia se apoya en map, que recorre todos los elementos del array y permite transformarlos sin mutar el original.
typescript
updateTask(index: number) {
this.tasks.update((prevState) => {
return prevState.map((task, position) => {
if (position === index) {
return {
...task,
completed: !task.completed
};
}
return task;
});
});
}
El método map recibe dos parámetros: el elemento actual y su position. Si la posición coincide con el index recibido, copias todos los atributos de la tarea con el spread operator y solo cambias completed, negando su valor anterior. Si no coincide, devuelves la tarea intacta [03:30].
¿Qué hace el operador de negación sobre un booleano? Invierte su valor. Si completed es false, pasa a true; si es true, pasa a false. Es la forma más limpia de alternar un estado.
¿Cómo conectar el checkbox con el método updateTask?
En el template, el checkbox necesita dos cosas: mostrar el estado actual y disparar la actualización al hacer click.
- Usa property binding para enlazar
checked al atributo completed de cada tarea.
- Asocia el evento
change al método updateTask.
- Envía
i, la variable del for, como parámetro de posición.
Como ya estás iterando con un for sobre el array, tienes acceso tanto a los atributos de la tarea (título, completado) como al índice. El mismo i que usaste para eliminar tareas te sirve aquí [05:00].
¿Cómo mostrar el contador de tareas de forma reactiva?
Una vez que el toggle funciona, agregar un contador de elementos es trivial gracias a las señales.
En el <strong> que representa el contador, usa string interpolation para suscribirte a la señal tasks y leer su length. Cada vez que agregues, elimines o actualices una tarea, el contador se recalcula automáticamente [06:20].
Al probarlo en el navegador verás el comportamiento esperado: agregas "jugar Xbox", inicia en false, lo marcas como completado y el JSON cambia al instante. Cada tarea se actualiza de forma individual y el contador refleja el total en tiempo real.
Este patrón combina lo mejor de Angular moderno: señales reactivas, inmutabilidad y separación de responsabilidades con métodos dedicados para agregar, eliminar y actualizar.
¿Qué otros métodos inmutables sueles usar en tus proyectos con Signals? Cuéntame en los comentarios cómo resolverías el caso de actualizar varias tareas a la vez.
