Quando un componente e il suo template interagiscono, è possibile scambiare dati ed eventi tra di essi in diversi modi. Questo processo è chiamato data binding.

In Angular, esistono quattro tipi di data binding, ciascuno con uno scopo specifico.

Analizziamo come funzionano utilizzando come esempio un semplice componente di attività:

Qui viene creato un oggetto task con tre proprietà: id, title e completed. Queste proprietà descrivono una specifica attività—il suo nome e se è stata completata.

Interpolazione

Ad esempio, se si dispone di una variabile come task.title, è possibile racchiuderla tra {{ }} e Angular ne renderizzerà il valore nell'HTML.

Quando Angular elabora il template, trova l'espressione {{ task.title }} e la sostituisce con il valore attuale di task.title dal componente.

Se il valore è 'Buy groceries', è esattamente ciò che apparirà all'interno del tag <h3>. Lo stesso processo si applica a qualsiasi altro valore interpolato.

Quindi, l'interpolazione è unidirezionale: i dati fluiscono dal componente al template e l'utente vede semplicemente il risultato.

Associazione di proprietà

A volte non si desidera solo mostrare del testo, ma anche controllare il comportamento di un elemento, come disabilitare un pulsante, impostare la sorgente di un'immagine o selezionare una casella di controllo.

Angular consente di associare valori alle proprietà degli elementi HTML utilizzando le parentesi quadre.

Immagina che il task sia già stato completato (task.completed = true). In tal caso, desideriamo che il pulsante sia disabilitato. Quando Angular rileva [disabled]="task.completed", prende il valore dal componente e lo associa alla proprietà disabled dell'elemento DOM.

Se il valore è true, il pulsante viene disabilitato. Se è false, il pulsante rimane attivo.

Anche in questo caso si tratta di one-way binding: i dati fluiscono dal componente al template, e il template si adatta in base allo stato attuale dell'oggetto task.

Associazione di Eventi

Per consentire all'applicazione di rispondere alle azioni dell'utente (come i click), Angular fornisce l'associazione di eventi. Quando un utente interagisce con un elemento, è possibile "catturare" quell'evento e chiamare un metodo nel componente.

Aggiungiamo un metodo al componente:

E aggiornare il template:

Quando l'utente fa clic sul pulsante, Angular rileva l'evento (click) e richiama il metodo toggleComplete() nel componente. Questo metodo alterna il valore di task.completed. Successivamente, Angular esegue nuovamente il rendering del template e, grazie all'interpolazione ({{ task.completed ? 'Undo' : 'Complete' }}), il testo del pulsante si aggiorna istantaneamente.

In questo caso, i dati fluiscono in una sola direzione — dal template verso il componente (si passa un'azione all'interno).

Associazione bidirezionale

A volte è necessario che le modifiche nel template (come la digitazione in un campo di input) aggiornino immediatamente il componente — e che le modifiche nel componente aggiornino immediatamente il template. Angular semplifica questo processo tramite l'associazione bidirezionale utilizzando [(ngModel)].

Importante: Per utilizzare [(ngModel)], è necessario importare il FormsModule — come mostrato di seguito:

Ecco il template:

Qui avviene la magia del data binding bidirezionale. Quando un utente digita nel campo di input, Angular aggiorna automaticamente task.title all'interno del componente. E quando task.title cambia nel componente, Angular riflette immediatamente tale aggiornamento nel campo di input.

A differenza degli altri tipi di binding, il data binding bidirezionale mantiene sempre sincronizzati il componente e il template.

Differenze principali

Ciascuno di questi metodi di binding presenta caratteristiche specifiche ed è più adatto a diversi scenari di interazione dei dati all'interno di un'applicazione.