Two-way data binding in Angular 2

Una dei cavalli di battaglia di Angular 1.x è stato il two-way data binding, il meccanismo automatico che consente di effettuare il binding di un elemento dell'interfaccia con il modello dei dati e viceversa, dal modello dei dati verso l'elemento dell'interfaccia.

Questo meccanismo di sincronizzazione automatica ha indubbiamente il suo fascino, dal momento che consente di creare interattività tra i vari componenti dell'interfaccia e con il modello dei dati sottostante con poco sforzo, ma ha anche un prezzo in termini di prestazioni. L'uso implicito del two-way data binding di Angular 1.x incide sulle prestazioni dal momento che è attivo anche quando il suo utilizzo non è strettamente necessario.

Angular 2 non ha il two-way data binding predefinito, come accadeva nella versione 1.x. Tuttavia possiamo attivarlo utilizzando la sintassi mostrata nel seguente esempio:

Inserisci un numero:
<input type="number" [(ngModel)]="numero" />
<div>
	Il doppio di {{numero}} &egrave; {{numero * 2}}
</div>

Come possiamo vedere, abbiamo combinato insieme la sintassi per il binding delle proprietà con la sintassi della gestione degli eventi attorno ad un attributo predefinito (più precisamente, ad una direttiva), ngModel, a cui abbiamo assegnato una variabile, numero, che rappresenta il modello dei dati sottostante. L'effetto che otteniamo è analogo a quello che abbiamo visto utilizzando le reference, ma senza necessità di esplicitare un evento e con in più una mappatura diretta con la variabile del modello all'interno del componente che utilizza il nostro template.

Abbiamo detto che la sintassi del two-way data binding sembra la combinazione della sintassi del binding delle proprietà con quella della gestione degli eventi. In effetti essa non è altro che una forma sintetica delle due sintassi. Se consideriamo il seguente markup:

<input type="number" [(ngModel)]="numero" />

esso può essere considerato una forma compatta del seguente:

<input type="number"
       [ngModel]="numero"
	   (ngModelChange)="numero = $event" />

In questo markup vediamo proprio le forme distinte del binding di proprietà e di gestione degli eventi. In questo caso utilizziamo sempre la direttiva predefinita ngModel e l'evento ngModelChange. A sua volta, il markup appena visto non è altro che una forma abbreviata del seguente:

<input type="number"
       [value]="numero"
       (input)="numero = $event.target.value" />

Come abbiamo potuto vedere, la magia del two-way data binding è stata riportata alla semplice applicazione di ciò che conoscevamo già.