Reference, binding combinato tra elementi

Talvolta abbiamo la necessità di mettere in comunicazione due elementi o due componenti, facendo in modo che un cambiamento su di uno si rifletta sull’altro. Un semplice esempio è quello dell’immissione di un valore in una casella di testo e la visualizzazione del valore o di un calcolo su di esso in un altro elemento del template. Angular consente di ottenere questo effetto direttamente sul template sfruttando le reference.

Consideriamo il seguente esempio:

Inserisci un numero: 
<input type="number" #numero (keyup)="0" /> 
<div>
	Il doppio di {{numero.value}} &egrave; {{numero.value * 2}}
</div>

Come possiamo vedere, abbiamo inserito la stringa #numero all’interno dell’elemento <input>. Questa stringa è una reference, una sorta di identificatore che può essere utilizzato per far riferimento all’elemento all’interno del template. Infatti viene utilizzato nel <div> adiacente all’interno delle espressioni di interpolazione dove utilizziamo la proprietà value dell’elemento <input>.

Un accorgimento particolare fondamentale perché il binding funzioni è quello di indicare l’evento che lo scatena. Nel nostro caso abbiamo indicato l’evento keyup al quale abbiamo assegnato il valore zero, un’espressione che non fa assolutamente nulla. In questo caso abbiamo soltanto bisogno che l’evento sia preso in considerazione da Angular per aggiornare la view, dal momento che non abbiamo bisogno di effettuare elaborazioni complesse.

Più in generale, possiamo utilizzare una reference per accedere a proprietà di elementi e componenti ed eventualmente passarli a proprietà e gestori di evento di altri elementi e componenti.

Come per gli altri elementi sintattici dei template di Angular, anche per le reference è disponibile una sintassi canonica della forma ref-<nomeAttributo>. Possiamo quindi riscrivere l’esempio precedente come mostrato di seguito:

Inserisci un numero: 
<input type="number" ref-numero (keyup)="0" /> 
<div>
	Il doppio di {{numero.value}} &egrave; {{numero.value * 2}}
</div>