Neste estágio, nosso aplicativo já sabe como exibir uma lista de tarefas e mostrar uma mensagem quando não há nenhuma. No entanto, os usuários ainda não têm uma maneira de inserir novas tarefas.

Adicionaremos a capacidade de criar uma nova tarefa usando um botão conveniente e um formulário modal.

Implementaremos:

• Um botão Add estiloso;

• Uma janela modal com um campo de entrada para o título da tarefa;

• A lógica para adicionar uma tarefa à lista no TaskService;

• Geração automática de um identificador único.

Introdução

A primeira coisa que precisamos fazer é aprimorar nosso TaskService para que ele possa criar e armazenar novas tarefas. O serviço não deve apenas armazenar tarefas, mas também gerenciar toda a lógica de negócios relacionada a elas.

Criaremos um método addTask no serviço. A geração de um ID único, a criação do objeto tarefa e o salvamento na lista ocorrerão todos dentro do serviço. O método receberá apenas um title, que será passado pelo TaskListComponent.

O método addTask() recebe apenas o título da tarefa e cria o objeto Task internamente. Ele primeiro encontra o maior ID entre as tarefas existentes, depois soma 1 para gerar um identificador único. A nova tarefa é sempre definida como incompleta (completed: false) e é imediatamente adicionada ao array tasks.

Essa abordagem elimina lógicas desnecessárias do componente e torna o serviço autossuficiente e reutilizável.

Atualizando o TaskListComponent

Agora que toda a lógica para criar uma nova tarefa foi movida para o serviço, o componente é responsável apenas por receber a entrada do usuário, enviar o título da tarefa para o serviço e atualizar a lista local de tarefas. Essa abordagem simplifica o componente e centraliza a lógica de negócio no TaskService.

Dentro do componente, adicionaremos duas variáveis:

• showAddTask — flag que controla a visibilidade da janela modal para adicionar uma tarefa;

• newTaskTitle — string que armazena o título da tarefa inserido pelo usuário.

Também implementaremos o método addTask(), que:

1. Verifica se a string de entrada não está vazia;

2. Passa o título da tarefa para o método addTask(title: string) do serviço;

3. Atualiza a lista local de tarefas;

4. Limpa o campo de entrada e fecha a janela modal.

O método addTask() agora está o mais simples possível: ele lida apenas com a interação do usuário e delega toda a lógica de negócios para o serviço. Isso torna o código mais fácil de manter e testar.

Além disso, certifique-se de que o FormsModule está importado em seu módulo, pois ele é necessário para a ligação bidirecional de dados com newTaskTitle.

Botão Adicionar e Janela Modal

Agora, vamos adicionar a parte da interface: o botão Adicionar e a marcação HTML para a janela modal que inclui o campo de entrada e os botões.

Quando o usuário clica no botão Add, a variável showAddTask se torna true e a janela modal aparece. O campo de entrada está vinculado à variável newTaskTitle via [(ngModel)], e as ações dos botões salvam a tarefa ou fecham o modal sem alterações.

Os usuários poderão adicionar tarefas de forma conveniente por meio de um formulário modal. A nova tarefa aparece imediatamente na lista sem necessidade de atualizar a página.

Agora implementamos interatividade que torna nossa aplicação completa e fácil de usar no dia a dia.