Il data binding in Angular è un argomento importante quando si tratta di passare dati tra componenti al DOM. In questo articolo, parlerò del data binding unidirezionale e bidirezionale.
Questo è un metodo di data binding unidirezionale. Se usiamo il data binding unidirezionale possiamo solo legare i dati dal componente alla vista o dalla vista al componente. Ci sono molti modi diversi in cui possiamo usare il data binding unidirezionale nella nostra applicazione Angular.
- Interpolazione Binding
L’interpolazione è un metodo molto comune che usiamo per legare i dati in Angular e questo si riferisce al legame dei valori negli elementi UI.
Come mostrato in questo esempio possiamo usare la variabile vincolata negli elementi HTML aggiungendo parentesi graffe come {{Nome}}. Questo metodo è usato principalmente quando abbiamo bisogno di concatenare due valori. es: {{FirstName}} {{Cognome}}.
2. Property Binding.
Questo è un altro approccio ampiamente usato per legare i dati e con questo metodo, possiamo legare i valori dai componenti nelle proprietà DOM degli elementi HTML.
Se usiamo l’interpolazione in tali situazioni il pulsante sarà sempre disabilitato trascurando il valore della variabile.
3. Attribute Binding
Attribute binding è usato per legare una proprietà di attributo di un elemento della vista. Prendiamo uno scenario in cui abbiamo bisogno di unire alcune colonne in una tabella usando un attributo colspan.
Se usiamo la variabile value come mostrato nel commento o come property bind risulterà in un errore. Quindi abbiamo bisogno di usare un Attribute bonding con inizio con attr e seguito da un punto e dal nome dell’attributo.
4. Class Binding
La sintassi del class binding è molto simile all’Attribute Binding e questo metodo è usato per impostare una proprietà di classe di un elemento della vista. Con l’uso di questo metodo di binding, possiamo aggiungere classi CSS in modo condizionale ad un elemento, creando elementi con stile dinamico.
La proprietà CSS red sarà applicata solo quando i voti degli studenti sono inferiori a 40. Come simile all’attributo, il binding di classe inizia con la parola chiave class seguita da un punto e dal nome della classe.
5. Style Binding
Anche questo metodo è molto simile ai due precedenti e possiamo impostare Style Binding per impostare stili css in linea.
Two-Way Data Binding
Two-way data binding è stabilire una connessione bidirezionale tra View e componente permettendo agli utenti di scambiarsi dati in entrambi i modi. Il data binding bidirezionale può essere facilmente ottenuto utilizzando (ngModel).
Si prega di assicurarsi di importare FormsModule da @angular/forms al file app.component.ts se si sta utilizzando (ngModel).