Hai già familiarizzato con i tipi base di data binding. Ora, esaminiamo come vengono applicati nella pratica durante il lavoro con il TaskComponent.

Struttura del Task

Il nostro task component mostrerà il titolo del task, oltre a due pulsanti: uno per cambiare 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 compito, come il suo id, il title e lo stato di 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. Possiamo 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 del task.

Aggiunta di classi dinamiche con il property binding

Ora aggiungiamo la possibilità di modificare l'aspetto del task 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 il task è completato, 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 consente 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, il template per il nostro semplice componente task è stato completamente implementato. Ecco come appare il componente:

Il componente fornisce i dati e 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 cambia e i pulsanti si adattano allo stato dell'attività.