Nella pagina principale della nostra applicazione, l'utente visualizza un elenco di tutte le attività. Questo permette 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 mostrerà come costruire il TaskDetailsComponent, che si apre quando l'utente naviga verso uno specifico URL 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 tranquillamente il file di test se non necessario.

Implementazione del Componente

In questa fase, 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 visualizzare la scheda dei dettagli dell'attività se l'attività esiste; in caso contrario, mostra un messaggio "Task not found" utilizzando ng-template.

All'interno della scheda vengono mostrati ID, title e status 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 essere utilizzato. Lo collegheremo al nostro routing nel prossimo capitolo.