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, ognuno con uno scopo specifico.

Vediamo come funzionano utilizzando come esempio un semplice componente di task:

Qui creiamo un oggetto task con tre proprietà: id, title e completed. Queste proprietà descrivono un task specifico—il suo nome e se è stato completato.

Interpolazione

Ad esempio, se hai una variabile come task.title, puoi racchiuderla tra {{ }}, e Angular visualizzerà il suo 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à completato (task.completed = true). In tal caso, vogliamo che il pulsante sia disabilitato. Quando Angular vede [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.

Event Binding

Per far sì che la tua applicazione risponda alle azioni dell'utente (come i click), Angular fornisce il binding degli eventi. Quando un utente interagisce con un elemento, puoi "catturare" quell'evento e chiamare un metodo nel tuo componente.

Aggiungiamo un metodo al componente:

E aggiorna 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).

Binding 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 con il binding bidirezionale utilizzando [(ngModel)].

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

Ecco il template:

Qui avviene la magia del two-way binding. 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 quell'aggiornamento nel campo di input.

A differenza degli altri tipi di binding, il two-way binding mantiene sempre sincronizzati il componente e il template.

Differenze principali

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