Como Eles Estão Conectados?

O TaskListComponent irá gerenciar um array de tarefas, onde cada tarefa é um objeto com os campos id, title e completed. Para exibir cada tarefa, utilizaremos o TaskComponent.

Além disso, o TaskComponent irá se comunicar com seu componente pai sobre ações do usuário, como quando uma tarefa deve ser excluída ou marcada como concluída. Essa interação ocorrerá por meio da emissão de eventos.

Implementação da Lógica do TaskListComponent

Vamos criar um componente responsável por gerenciar a lista de tarefas. Dentro dele, definiremos um array de tarefas e também adicionaremos dois métodos — deleteTask() e toggleStatus() — para lidar com o gerenciamento das tarefas.

• A lista de tarefas (tasks) é gerenciada dentro do componente, tornando o TaskListComponent o controlador central;
• O método deleteTask() filtra a tarefa pelo seu id;
• O método toggleStatus() localiza a tarefa pelo id e alterna o status de completed.

Este código utiliza a diretiva *ngFor para percorrer o array tasks e criar um TaskComponent para cada tarefa. Analisaremos com mais detalhes como o *ngFor funciona na próxima seção.

• [task]="task" — passa a tarefa atual para o componente filho para que ele possa exibi-la;

• (onDelete)="deleteTask($event)" — escuta o evento onDelete do componente filho e chama deleteTask() para remover a tarefa;

• (onToggle)="toggleStatus($event)" — escuta o evento onToggle e chama toggleStatus() para alterar o status da tarefa.

Decoradores: @Input() e @Output()

Agora é hora de conectar o TaskComponent com o TaskListComponent, e para isso, utilizaremos os decoradores @Input() e @Output().

No Angular, os decoradores @Input() e @Output() são ferramentas essenciais para a comunicação entre componentes. Eles permitem passar dados para dentro de um componente e emitir eventos para fora de um componente. Veja um breve resumo:

Aqui está um exemplo de como eles funcionam no TaskComponent:

No nosso caso, task é o objeto passado do componente pai TaskListComponent para o TaskComponent.

Quando o usuário exclui uma tarefa ou alterna seu status, o TaskComponent emite eventos que o componente pai escuta.

@Output() e EventEmitter são usados para notificar o componente pai quando algo acontece no componente filho. Esses decoradores permitem que o componente filho comunique ações como exclusão de tarefas ou alterações de status ao componente pai.

O método deleteTask() é chamado quando o usuário deseja excluir uma tarefa. Ele emite o id da tarefa, permitindo que o pai remova a tarefa de sua lista.

O método toggleTask() alterna o status de conclusão da tarefa e informa o componente pai sobre essa alteração.

Como Tudo Funciona Junto

1. TaskListComponent passa uma tarefa para TaskComponent usando @Input();

2. O usuário interage com a tarefa (como clicando em "Delete");

3. TaskComponent emite um evento (onDelete ou onToggle) com o id da tarefa;

4. TaskListComponent captura o evento e atualiza a lista de tarefas;

5. O Angular atualiza automaticamente a interface com base nos dados atualizados.

Dessa forma, @Input() e @Output() permitem uma comunicação limpa e eficiente entre componentes, mantendo a estrutura organizada e reativa.