Legătura bidirecțională a datelor în Angular

În Angular se poate face astfel încât, pe măsură ce introducem text în input, acest text să ajungă automat în proprietatea clasei. Aceasta se numește legătură bidirecțională a datelor.

Pentru ca această legătură să funcționeze, pentru început trebuie activată. Pentru aceasta, în fișierul componentei importăm FormsModule:

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

Apoi adăugăm în proprietatea imports a decoratorului @Component:

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

După aceasta, legătura bidirecțională a datelor va fi activată și o putem folosi. Să o facem acest lucru.

Pentru început, să declarăm o proprietate a clasei, pe care apoi o vom supune legăturii bidirecționale:

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

Să presupunem că avem un div și un input. Să se afișeze în div o anumită proprietate a clasei:

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

Să legăm proprietatea noastră text la modificarea inputului. Pentru aceasta, în input trebuie scrisă directiva specială [(ngModel)], a cărei valoare trebuie să fie proprietatea clasei noastre:

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

Acum, dacă pornim codul și începem să introducem text în input, acest text va începe imediat să se afișeze în div.

Este dat un input și un paragraf. În input se afișează un număr. Faceți astfel încât, pe măsură ce se introduce numărul în input, în paragraf să se afișeze pătratul acestui număr.

Sunt date două inputuri și un paragraf. În inputuri se introduc numere. Faceți astfel încât în paragraf să se afișeze suma numerelor introduse.