Data Binding Bidirezionale in Angular

In Angular è possibile fare in modo che mentre si digita del testo in un input, quel testo venga automaticamente inserito in una proprietà della classe. Questo si chiama data binding bidirezionale.

Per far funzionare questo binding, per prima cosa è necessario abilitarlo. Per farlo, nel file del componente importiamo FormsModule:

import { FormsModule } from '@angular/forms';

E poi lo aggiungiamo alla proprietà imports del decoratore @Component:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Dopo questo, il data binding bidirezionale sarà abilitato e potremo utilizzarlo. Facciamolo.

Per iniziare, dichiariamo una proprietà della classe che sottoporremo poi al binding bidirezionale:

export class AppComponent {
	public text: string = '';
}

Supponiamo di avere un div e un input. Nel div viene visualizzata una certa proprietà della classe:

<div>
	{{ text }}
</div>
<input>

Colleghiamo la nostra proprietà text alla modifica dell'input. Per farlo, nell'input bisogna scrivere una direttiva speciale [(ngModel)], il cui valore deve essere la proprietà della nostra classe:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Ora, se avviamo il codice e iniziamo a digitare del testo nell'input, quel testo inizierà immediatamente ad essere visualizzato nel div.

Dato un input e un paragrafo. Nell'input viene inserito un numero. Fate in modo che mentre si inserisce il numero nell'input, nel paragrafo venga visualizzato il quadrato di questo numero.

Dati due input e un paragrafo. Negli input vengono inseriti numeri. Fate in modo che nel paragrafo venga visualizzata la somma dei numeri inseriti.