How Are They Connected?

The TaskListComponent will manage an array of tasks, where each task is an object with id, title, and completed fields. To display each task, we'll use the TaskComponent.

Additionally, TaskComponent will communicate with its parent component about user actions, such as when a task should be deleted or marked as complete. This interaction will happen through event emission.

Implementing the TaskListComponent Logic

Let's create a component that will be responsible for managing the task list. Inside it, we'll define an array of tasks and also add two methods — deleteTask() and toggleStatus() — to handle task management.

• The list of tasks (tasks) is managed inside the component, making TaskListComponent the central controller;
• The deleteTask() method filters out the task by its id;
• The toggleStatus() method finds the task by id and toggles its completed status.

This code uses the *ngFor directive to loop through the tasks array and create a TaskComponent for each task. We'll take a closer look at how *ngFor works in the next section.

• [task]="task" — passes the current task to the child component so it can display it;

• (onDelete)="deleteTask($event)" — listens for the onDelete event from the child and calls deleteTask() to remove the task;

• (onToggle)="toggleStatus($event)" — listens for the onToggle event and calls toggleStatus() to change the task's status.

Decorators: @Input() and @Output()

Now it's time to connect the TaskComponent with the TaskListComponent, and for that, we'll use the decorators @Input() and @Output().

In Angular, the @Input() and @Output() decorators are key tools for communication between components. They allow you to pass data into a component and emit events out of a component. Here's a quick overview:

Here's an example of how they work in the TaskComponent:

In our case, task is the object passed from the parent TaskListComponent into the TaskComponent.

When the user either deletes a task or toggles its status, the TaskComponent emits events that the parent component listens for.

@Output() and EventEmitter are used to notify the parent component when something happens in the child. These decorators allow the child component to communicate actions like task deletions or status changes to the parent.

The deleteTask() method is called when the user wants to delete a task. It emits the task's id, enabling the parent to remove the task from its list.

The toggleTask() method toggles the task's completed status and informs the parent component about this change.

How It All Works Together

1. TaskListComponent passes a task to TaskComponent using @Input();

2. The user interacts with the task (like clicking "Delete");

3. TaskComponent emits an event (onDelete or onToggle) with the task's id;

4. TaskListComponent catches the event and updates the task list;

5. Angular automatically refreshes the UI based on the updated data.

This way, @Input() and @Output() enable clean, efficient communication between components, keeping the structure organized and reactive.