- Learn
- Guida Angular 2
- Reference, binding combinato tra elementi
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}} è {{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}} è {{numero.value * 2}}
</div>
Se vuoi aggiornamenti su AngularJS, JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Photoshop, decorare un testo con il cioccolato – parte 1
Desiderate un effetto speciale da applicare al logo della vostra azienda o realizzare un testo con un delizioso effetto goloso? […]