En esta etapa, nuestra aplicación ya sabe cómo mostrar una lista de tareas y mostrar un mensaje cuando no hay ninguna. Sin embargo, los usuarios aún no tienen una forma de ingresar nuevas tareas.

Agregaremos la capacidad de crear una nueva tarea utilizando un botón conveniente y un formulario modal.

Implementaremos:

• Un botón Add con estilo;

• Una ventana modal con un campo de entrada para el título de la tarea;

• La lógica para agregar una tarea a la lista en el TaskService;

• Generación automática de un identificador único.

Comenzando

Lo primero que necesitamos hacer es mejorar nuestro TaskService para que pueda crear y almacenar nuevas tareas. El servicio no solo debe almacenar tareas, sino también manejar toda la lógica de negocio relacionada con ellas.

Crearemos un método addTask en el servicio. La generación de un ID único, la creación del objeto de tarea y su almacenamiento en la lista ocurrirán dentro del servicio. El método solo recibirá un title, que será pasado desde el TaskListComponent.

El método addTask() toma únicamente el título de la tarea y crea el objeto Task internamente. Primero encuentra el ID máximo entre las tareas existentes, luego le suma 1 para generar un identificador único. La nueva tarea siempre se establece como incompleta (completed: false) y se agrega inmediatamente al arreglo tasks.

Este enfoque elimina la lógica innecesaria del componente y hace que el servicio sea autosuficiente y reutilizable.

Actualización del TaskListComponent

Ahora que toda la lógica para crear una nueva tarea se ha trasladado al servicio, el componente solo se encarga de recibir la entrada del usuario, enviar el título de la tarea al servicio y actualizar la lista local de tareas. Este enfoque simplifica el componente y centraliza la lógica de negocio en el TaskService.

Dentro del componente, agregaremos dos variables:

• showAddTask — una bandera que controla la visibilidad de la ventana modal para agregar una tarea;

• newTaskTitle — una cadena para almacenar el título de la tarea ingresado por el usuario.

También implementaremos el método addTask(), que:

1. Verifica que la cadena de entrada no esté vacía;

2. Pasa el título de la tarea al método addTask(title: string) del servicio;

3. Actualiza la lista local de tareas;

4. Limpia el campo de entrada y cierra la ventana modal.

El método addTask() ahora es lo más simple posible: solo gestiona la interacción del usuario y delega toda la lógica de negocio al servicio. Esto hace que el código sea más fácil de mantener y probar.

Además, asegúrese de que FormsModule esté importado en su módulo, ya que es necesario para la vinculación bidireccional de datos con newTaskTitle.

Botón Agregar y Ventana Modal

Ahora, agreguemos la parte de la interfaz de usuario: el botón Agregar y el marcado HTML para la ventana modal que incluye el campo de entrada y los botones.

Cuando el usuario hace clic en el botón Add, la variable showAddTask se establece en true y aparece la ventana modal. El campo de entrada está vinculado a la variable newTaskTitle mediante [(ngModel)], y las acciones de los botones permiten guardar la tarea o cerrar el modal sin realizar cambios.

Los usuarios podrán agregar tareas de manera conveniente a través de un formulario modal. La nueva tarea aparece inmediatamente en la lista sin necesidad de actualizar la página.

Ahora hemos implementado interactividad que hace que nuestra aplicación sea completa y fácil de usar para el día a día.