¿Cómo están conectados?

El TaskListComponent gestionará un arreglo de tareas, donde cada tarea es un objeto con los campos id, title y completed. Para mostrar cada tarea, utilizaremos el TaskComponent.

Además, TaskComponent se comunicará con su componente padre sobre las acciones del usuario, como cuando una tarea debe eliminarse o marcarse como completada. Esta interacción ocurrirá mediante la emisión de eventos.

Implementación de la lógica de TaskListComponent

Crearemos un componente que será responsable de gestionar la lista de tareas. Dentro de él, definiremos un arreglo de tareas y también agregaremos dos métodos — deleteTask() y toggleStatus() — para manejar la gestión de tareas.

• La lista de tareas (tasks) se gestiona dentro del componente, haciendo que TaskListComponent sea el controlador central;
• El método deleteTask() filtra la tarea por su id;
• El método toggleStatus() encuentra la tarea por id y alterna su estado completed.

Este código utiliza la directiva *ngFor para iterar sobre el arreglo tasks y crear un TaskComponent para cada tarea. Analizaremos más a fondo cómo funciona *ngFor en la siguiente sección.

• [task]="task" — pasa la tarea actual al componente hijo para que pueda mostrarla;

• (onDelete)="deleteTask($event)" — escucha el evento onDelete del hijo y llama a deleteTask() para eliminar la tarea;

• (onToggle)="toggleStatus($event)" — escucha el evento onToggle y llama a toggleStatus() para cambiar el estado de la tarea.

Decoradores: @Input() y @Output()

Ahora es momento de conectar el TaskComponent con el TaskListComponent, y para ello, utilizaremos los decoradores @Input() y @Output().

En Angular, los decoradores @Input() y @Output() son herramientas clave para la comunicación entre componentes. Permiten pasar datos a un componente y emitir eventos desde un componente. Aquí tienes una breve descripción:

Aquí tienes un ejemplo de cómo funcionan en el TaskComponent:

En nuestro caso, task es el objeto que se pasa desde el componente padre TaskListComponent al TaskComponent.

Cuando el usuario elimina una tarea o cambia su estado, el TaskComponent emite eventos que el componente padre escucha.

@Output() y EventEmitter se utilizan para notificar al componente padre cuando ocurre algún evento en el componente hijo. Estos decoradores permiten que el componente hijo comunique acciones como eliminaciones de tareas o cambios de estado al padre.

El método deleteTask() se llama cuando el usuario desea eliminar una tarea. Emite el id de la tarea, permitiendo que el padre elimine la tarea de su lista.

El método toggleTask() alterna el estado de completado de la tarea e informa al componente padre sobre este cambio.

Cómo Funciona Todo en Conjunto

1. TaskListComponent pasa una tarea a TaskComponent usando @Input();

2. El usuario interactúa con la tarea (como hacer clic en "Delete");

3. TaskComponent emite un evento (onDelete o onToggle) con el id de la tarea;

4. TaskListComponent captura el evento y actualiza la lista de tareas;

5. Angular actualiza automáticamente la interfaz de usuario según los datos actualizados.

De esta manera, @Input() y @Output() permiten una comunicación limpia y eficiente entre componentes, manteniendo la estructura organizada y reactiva.