Na página principal do nosso aplicativo, o usuário visualiza uma lista de todas as tarefas. Isso facilita obter rapidamente uma visão geral do que precisa ser feito.

Mas e se o usuário quiser ver os detalhes de uma tarefa específica — seu ID único, título exato e status? Para isso, precisamos criar uma página separada de detalhes da tarefa.

Este capítulo mostrará como construir o TaskDetailsComponent, que é aberto quando o usuário navega para uma URL específica e exibe informações sobre uma determinada tarefa.

Criando um Novo Componente

Para exibir os detalhes da tarefa, criaremos um componente independente. Ele será autônomo e pode ser conectado diretamente na configuração de rotas.

Execute este comando:

Isso criará o arquivo task-details.component.ts juntamente com seu template, estilos e testes. Você pode excluir o arquivo de teste, se desejar.

Implementando o Componente

Neste estágio, precisamos apenas do id, título e status da tarefa — estas são todas as informações que temos sobre uma tarefa. Portanto, no componente, adicionaremos apenas uma propriedade task.

Agora, crie o template e seus estilos CSS:

O template utiliza a diretiva *ngIf para exibir o card de detalhes da tarefa caso a tarefa exista; caso contrário, mostra a mensagem "Task not found" usando ng-template.

Dentro do card, são exibidos o ID, title e status da tarefa, além de um botão para retornar à lista principal de tarefas (a funcionalidade do botão será adicionada posteriormente).

Agora, o TaskDetailsComponent está pronto para uso. Ele será conectado ao nosso roteamento no próximo capítulo.