Come Sono Collegati?

Il TaskListComponent gestirà un array di task, dove ogni task è un oggetto con i campi id, title e completed. Per visualizzare ciascun task, utilizzeremo il TaskComponent.

Inoltre, il TaskComponent comunicherà con il suo componente genitore riguardo alle azioni dell'utente, come quando un task deve essere eliminato o contrassegnato come completato. Questa interazione avverrà tramite l'emissione di eventi.

Implementazione della Logica di TaskListComponent

Creiamo un componente che sarà responsabile della gestione dell'elenco dei task. Al suo interno, definiremo un array di task e aggiungeremo anche due metodi — deleteTask() e toggleStatus() — per gestire i task.

• L'elenco delle attività (tasks) è gestito all'interno del componente, rendendo TaskListComponent il controller centrale;
• Il metodo deleteTask() filtra l'attività tramite il suo id;
• Il metodo toggleStatus() trova l'attività tramite id e ne alterna lo stato completed.

Questo codice utilizza la direttiva *ngFor per iterare sull'array tasks e creare un TaskComponent per ogni attività. Analizzeremo più da vicino come funziona *ngFor nella prossima sezione.

• [task]="task" — passa l'attività corrente al componente figlio affinché possa visualizzarla;

• (onDelete)="deleteTask($event)" — ascolta l'evento onDelete dal figlio e richiama deleteTask() per rimuovere l'attività;

• (onToggle)="toggleStatus($event)" — ascolta l'evento onToggle e richiama toggleStatus() per modificare lo stato dell'attività.

Decoratori: @Input() e @Output()

Ora è il momento di collegare il TaskComponent con il TaskListComponent, e per farlo useremo i decoratori @Input() e @Output().

In Angular, i decoratori @Input() e @Output() sono strumenti fondamentali per la comunicazione tra componenti. Consentono di passare dati a un componente e di emettere eventi da un componente. Ecco una breve panoramica:

Ecco un esempio di come funzionano nel TaskComponent:

Nel nostro caso, task è l'oggetto passato dal componente genitore TaskListComponent al TaskComponent.

Quando l'utente elimina un'attività o ne cambia lo stato, il TaskComponent emette eventi a cui il componente genitore si iscrive.

@Output() e EventEmitter vengono utilizzati per notificare al componente genitore quando si verifica un evento nel componente figlio. Questi decorator permettono al componente figlio di comunicare azioni come l'eliminazione di un'attività o la modifica dello stato al genitore.

Il metodo deleteTask() viene chiamato quando l'utente desidera eliminare un'attività. Emette l'id dell'attività, consentendo al genitore di rimuovere l'attività dal proprio elenco.

Il metodo toggleTask() alterna lo stato di completamento dell'attività e informa il componente genitore di questa modifica.

Come Funziona Tutto Insieme

1. TaskListComponent passa un'attività a TaskComponent utilizzando @Input();

2. L'utente interagisce con l'attività (ad esempio cliccando su "Elimina");

3. TaskComponent emette un evento (onDelete o onToggle) con l'id dell'attività;

4. TaskListComponent intercetta l'evento e aggiorna l'elenco delle attività;

5. Angular aggiorna automaticamente l'interfaccia utente in base ai dati aggiornati.

In questo modo, @Input() e @Output() consentono una comunicazione pulita ed efficiente tra i componenti, mantenendo la struttura organizzata e reattiva.