Quali componenti sono necessari?

Hai già appreso cosa sia un componente. Ora è il momento di creare un proprio componente che possa essere utilizzato nell'app.

L'applicazione sarà composta da due componenti. Il primo è il TaskComponent, responsabile della visualizzazione di una singola task. All'interno di questo componente verranno mostrati l'id, il title e lo status della task. Verranno inoltre aggiunti pulsanti che consentono all'utente di completare o eliminare la task.

Il secondo componente è il TaskListComponent, che funge da contenitore per tutte le task. Contiene un'array di task e visualizza ciascuna utilizzando il TaskComponent. Questo componente gestirà anche la logica per aggiungere, aggiornare ed eliminare le task.

In sintesi, il TaskComponent gestisce l'aspetto e il comportamento di una singola task, mentre il TaskListComponent amministra l'intera lista di task e l'interazione tra di esse.

Regole per la Creazione di un Componente

In Angular, si utilizza l'Angular CLI per creare i componenti. È uno strumento pratico che genera automaticamente tutti i file necessari e integra il componente nella parte corretta del progetto.

È necessario creare due componenti: TaskComponent e TaskListComponent. Uno sarà responsabile della visualizzazione dei singoli task, mentre l'altro gestirà l'elenco dei task.

Struttura del Progetto

Per mantenere l'organizzazione, verrà creato un folder separato per ciascun componente all'interno della directory src/app. Questo renderà la base di codice più semplice da navigare e mantenere, specialmente con la crescita dell'applicazione.

Creazione del TaskComponent

Per generare un componente, si utilizza l'Angular CLI. Aprire il terminale in VS Code e assicurarsi di essere nella root del progetto. Quindi eseguire il seguente comando:

Oppure, una versione più breve:

Ecco una spiegazione del comando:

Dopo aver eseguito il comando, verrà creata una nuova cartella task all'interno di src/app, contenente quattro file:

È la configurazione standard per qualsiasi componente. L'unica differenza è il prefisso nei nomi dei file (task in questo caso), che deriva dal nome fornito nel comando generate.

Creazione del TaskListComponent

Ora creiamo il componente per l'elenco delle attività, proprio come fatto in precedenza. Esegui il seguente comando:

Questo genererà una nuova cartella task-list contenente i seguenti file:

Questi file svolgono le stesse funzioni che nel TaskComponent, ma ora sono destinati al secondo componente.

A questo punto, sono presenti due componenti separati con una struttura chiara: TaskComponent, che gestisce la logica e il template per un singolo task, e TaskListComponent, che gestisce l'intera lista di task.