Quali componenti sono necessari?

Sai già cos'è un componente. Ora è il momento di creare il tuo componente che può essere utilizzato nell'app.

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

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

In sintesi, il TaskComponent gestisce l'aspetto e il comportamento di un singolo task, mentre il TaskListComponent gestisce l'intera lista di task e l'interazione tra di essi.

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ù facile 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

Procediamo ora con la creazione del componente per l'elenco delle attività, come fatto in precedenza. Eseguire il seguente comando:

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

Questi file hanno le stesse funzioni del TaskComponent, ma ora sono destinati al secondo componente.

A questo punto, hai 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 dei task.