Na página principal do nosso aplicativo, o usuário vê 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, vamos criar 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 junto 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 vamos criar o template e seus estilos CSS:

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

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

Agora nosso TaskDetailsComponent está pronto para uso. Vamos conectá-lo ao nosso roteamento no próximo capítulo.