Hai già acquisito familiarità con i tipi di data binding di base. Ora, esaminiamo come vengono applicati nella pratica durante l'utilizzo del TaskComponent.

Struttura del Task

Il nostro task component mostrerà il titolo del task, oltre a due pulsanti: uno per modificare lo stato del task (da "Completa" a "Annulla"), e l'altro per eliminare il task. Ecco la struttura HTML che verrà utilizzata:

Gli stili sono già stati definiti. Puoi consultarli passando al file style.css.

Implementazione del componente

Il nostro componente lavorerà con un oggetto task, che memorizzerà le informazioni relative al task, come id, title e lo stato completed. Definiremo questo oggetto all'interno della classe del componente:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Possiamo visualizzare questi dati nel template HTML del componente.

Utilizzo dei dati del componente nel template

Per visualizzare i dati dell'oggetto task, è sufficiente fare riferimento direttamente alle sue proprietà nel template. Ad esempio, per mostrare il titolo del task:

<div class="task-title">{{ task.title }}</div>

Se l'attività è completata, il testo del pulsante dovrebbe cambiare. È possibile utilizzare un operatore ternario per modificare il testo del pulsante in base al valore di task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Se task.completed è true, il testo del pulsante mostrerà "Undo", altrimenti mostrerà "Complete". In questo modo, il testo del pulsante si adatta dinamicamente allo stato corrente di task.

Aggiunta di classi dinamiche con il property binding

Ora, aggiungiamo la possibilità di modificare l'aspetto dell'attività in base al suo stato. Utilizzeremo il property binding per applicare condizionalmente una classe CSS:

<div class="task" [class.completed]="task.completed">

Questo significa: se task.completed è true, la classe completed verrà aggiunta all'elemento. Altrimenti, la classe non verrà applicata.

Di conseguenza, quando l'attività è completata, l'aspetto visivo cambierà: il testo sarà barrato, il colore diventerà grigio e lo sfondo sarà grigio chiaro. Tutti questi stili sono definiti nella classe CSS .completed, descritta sopra.

Associazione di eventi ai pulsanti

Ora associamo gli eventi ai pulsanti affinché vengano eseguite le azioni appropriate quando i pulsanti vengono cliccati. Abbiamo due pulsanti:

• Il pulsante "Completa" / "Annulla" — al clic, alterna lo stato di completamento dell'attività;

• Il pulsante "Elimina" — al clic, elimina l'attività.

Per fare ciò, creeremo due metodi nel TaskComponent:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• Il metodo deleteTask() rimarrà vuoto per ora, poiché non abbiamo ancora una lista di attività da cui rimuovere elementi;

• Il metodo toggleTask() alterna semplicemente il valore di task.completed. Se l'attività è contrassegnata come completata (true), verrà contrassegnata come incompleta (false), e viceversa.

Ora, per far funzionare questi metodi quando i pulsanti vengono cliccati, è necessario associarli agli eventi di click dei pulsanti. Utilizzeremo il Binding degli Eventi con l'evento click per ascoltare i click sui pulsanti e chiamare i metodi corrispondenti.

In questo esempio, il binding degli eventi ci permette di collegare le azioni dell'utente ai metodi del componente. Il pulsante "Completa" / "Annulla" richiama il metodo toggleTask(), che alterna lo stato task.completed. Questo modifica anche il testo del pulsante da "Completa" a "Annulla" in base allo stato del task.

Il pulsante "Elimina" richiama il metodo deleteTask(), che attualmente non è implementato, poiché l'eliminazione del task verrà aggiunta successivamente.

Ora abbiamo implementato completamente il template per il nostro semplice componente task. Ecco come appare il componente:

Il componente fornisce i dati, mentre il template offre la rappresentazione visiva. Insieme, creano un'interfaccia attività interattiva e intuitiva per l'utente, in cui i dati vengono visualizzati, l'aspetto si modifica e i pulsanti si adattano allo stato dell'attività.