Editar una tarea con doble clic en Angular requiere combinar clases dinámicas, signals y un estado opcional dentro del modelo. Esta guía te muestra cómo activar el modo edición, restringirlo a una sola tarea a la vez y guardar el nuevo título al presionar enter, todo aprovechando la programación reactiva.

¿Cómo marcar una tarea como completada con una clase dinámica?

La clase completed se asigna directamente al elemento li cuando el estado de la tarea es true. Como ese estado ya es booleano, puedes enlazarlo sin condicionales adicionales y dejar que el signal haga el resto.

Apenas marcas el checkbox, la línea de tachado aparece en pantalla. Esto ocurre porque la programación reactiva detecta el cambio en el signal y vuelve a pintar el componente al instante.

¿Qué es una clase dinámica en Angular? Es una clase CSS que se aplica o se quita según una condición evaluada en tiempo real, normalmente atada a un signal o propiedad del componente.

¿Cómo activar el modo edición al hacer doble clic?

El evento que necesitas se llama dblclick y lo enlazas al li de cada tarea. Cuando se dispara, llamas a un método que recibe el índice de la tarea y actualiza su estado interno.

Para que ese estado exista, agrega un campo opcional al modelo Task. Lo declaras con signo de pregunta antes de los dos puntos, así:

typescript editing?: boolean;

Ese signo de interrogación indica que el campo no es obligatorio y que solo aparecerá cuando una tarea entre en modo edición [04:00].

¿Cómo se escribe el método updateTaskEditingMode?

Clona la lógica del método que ya tenías para actualizar tareas y, en la posición indicada por el índice, asigna editing: true. El resto de las tareas debe forzarse a editing: false durante el mismo update.

Esa pequeña regla resuelve un problema clave: solo una tarea puede estar en edición al mismo tiempo. Sin ella, podrías abrir varios inputs simultáneamente y romper la experiencia.

¿Cómo guardar el nuevo título al presionar enter?

En el input oculto que aparece sobre el texto, escucha el evento keydown.enter. Cuando el usuario presiona enter, dispara un método nuevo llamado updateTaskText que recibe el índice y el evento.

Dentro del método, lees el valor escrito desde event.target casteándolo como HTMLInputElement:

typescript const input = event.target as HTMLInputElement; const newValue = input.value;

Luego actualizas la tarea con ese nuevo valor y, al mismo tiempo, pones editing: false para sacarla del modo edición. Así, el enter cumple dos funciones: guardar y cerrar.

¿Por qué mi tarea no se actualiza aunque sale del modo edición? Casi siempre es un error en el nombre de la propiedad. Si tu modelo usa title pero el método actualiza text, estás modificando un campo que no existe.

¿Qué hacer cuando el título no se actualiza?

Revisa el modelo Task y confirma que la propiedad que renderizas en la plantilla coincida con la que estás escribiendo en el método. En el ejemplo del transcript, la propiedad correcta era title, no text, y ese pequeño detalle bloqueaba toda la edición [12:30].

Una vez corregido, puedes editar tareas nuevas y también las que ya están completadas. El estado completed se mantiene aunque cambies el texto, porque son dos campos independientes dentro del mismo objeto.

¿Cómo organizar bindings cuando un elemento tiene varios eventos?

Cuando un mismo li combina iteración, clase dinámica, evento de doble clic y más bindings, conviene escribir cada atributo en una línea distinta. Esa estructura vertical hace que el código sea más legible y reduce errores al revisar la plantilla.

Algunas piezas que vale la pena tener claras dentro de este flujo:

• El signal es el mecanismo reactivo que dispara el repintado cuando cambia el estado.
• El modelo Task define la forma del objeto y permite campos opcionales como editing.
• El método de update clona el arreglo, modifica la tarea por índice y devuelve el resto sin cambios.
• El cast a HTMLInputElement es necesario para acceder a value desde un event.target genérico.

Con estas piezas funcionando juntas, tienes una lista de tareas que marca, edita y guarda en tiempo real, sin recargar nada.

¿Te animas a sumar la restricción de que no se puedan editar tareas ya completadas? Cuéntame en los comentarios cómo lo resolverías.