Nella pagina principale della nostra applicazione, l'utente visualizza un elenco di tutte le attività. Questo consente di ottenere rapidamente una panoramica di ciò che deve essere fatto.

Ma cosa succede se l'utente desidera vedere i dettagli di una specifica attività — il suo ID univoco, il titolo esatto e lo stato? Per questo, è necessario creare una pagina separata per i dettagli dell'attività.

Questo capitolo mostra come costruire il TaskDetailsComponent, che si apre quando l'utente naviga verso un URL specifico e visualizza le informazioni relative a una determinata attività.

Creazione di un nuovo componente

Per visualizzare i dettagli dell'attività, verrà creato un componente standalone. Sarà indipendente e potrà essere collegato direttamente nella configurazione del routing.

Eseguire questo comando:

Questo comando creerà il file task-details.component.ts insieme al suo template, agli stili e ai test. È possibile eliminare il file di test se non necessario.

Implementazione del Componente

A questo punto, abbiamo bisogno solo dell'id, del titolo e dello stato del task — queste sono tutte le informazioni disponibili su un task. Quindi, nel componente, aggiungeremo semplicemente una proprietà task.

Ora creiamo il template e i relativi stili CSS:

Il template utilizza la direttiva *ngIf per mostrare la scheda dei dettagli dell'attività se l'attività esiste; in caso contrario, visualizza un messaggio "Attività non trovata" tramite ng-template.

All'interno della scheda vengono mostrati ID, titolo e stato dell'attività, oltre a un pulsante per tornare all'elenco principale delle attività (aggiungeremo la funzionalità del pulsante in seguito).

Ora il nostro TaskDetailsComponent è pronto per l'uso. Lo collegheremo al nostro routing nel prossimo capitolo.