Angularda Ikki Tomonlama Ma'lumotlar Bog‘lashi

Angularda inputga matn kiritilishi bilan, shu matn avtomatik ravishda klass xususiyatiga o‘tishi mumkin. Bu ikki tomonlama ma'lumotlar bog‘lashi deb ataladi.

Bunday bog‘lanish ishlashi uchun, avval uni yoqish kerak. Buning uchun komponent faylida FormsModule ni import qilamiz:

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

Keyin @Component dekoratorining imports xususiyatiga qo‘shamiz:

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

Shundan so‘ng, ikki tomonlama ma'lumotlar bog‘lashi yoqiladi va biz undan foydalanishimiz mumkin. Keling, buni amalga oshiramiz.

Boshlash uchun, klass xususiyatini e'lon qilaylik, keyin uni ikki tomonlama bog‘lashga duchor qilamiz:

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

Faraz qilaylik, bizda div va input bor. Divda klassning qandaydir xususiyati chiqarilsin:

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

Keling, text xususiyatimizni input o‘zgarishi bilan bog‘laymiz. Buning uchun inputda maxsus [(ngModel)] direktivasini yozish kerak, uning qiymati sifatida klassimizning xususiyatini ko‘rsatamiz:

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

Endi, agar kodni ishga tushirsak va inputga matn kiritishni boshlasak, shu matn darhol divda ko‘rinishni boshlaydi.

Input va abzas berilgan. Inputga son chiqarilgan. Inputga son kiritilishi bilan, abzada shu sonning kvadrati ko‘rsatilishi uchun qiling.

Ikkita input va abzas berilgan. Inputlarga sonlar kiritiladi. Abzada kiritilgan sonlar yig‘indisi ko‘rsatilishi uchun qiling.