Angular'де маалыматтарды эки тараптуу байлоо

Angular'да инпутка текст киргизилген сайын, ал текст классындагы касиетке автоматтык түрдө түшүшүн камсыз кылууга болот. Бул маалыматтарды эки тараптуу байлоо деп аталат.

Мындай байлоо ишке кириши үчүн, ага чейин аны күйгүзүү керек. Бул үчүн компоненттин файлында FormsModule импорттолот:

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

Андан кийин @Component декораторунун imports касиетине кошулат:

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

Андан кийин маалыматтарды эки тараптуу байлоо күйгүзүлөт жана биз аны колдоно алабыз. Келгиле, муну жасайлы.

Биринчиден, класстын биз андан кийин эки тараптуу байланышка дуушар кыла турган касиетин жарыялайлы:

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

Бизде див жана инпут бар деп коёлу. Дивде класстын кандайдыр бир касиети чыгарылсын:

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

Келгиле, биздин text касиетибизди инпуттун өзгөрүшүнө байлап коёлу. Бул үчүн инпутта [(ngModel)] атайын директивасын жазышыбыз керек, анын мааниси катанда класстын касиетин көрсөтүү керек:

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

Эми, эгерде кодду иштетип, инпутка текст киргизүүнү баштасак, бул текст дивде дароо эле көрсөтүлө баштайт.

Инпут жана абзац берилген. Инпутка сан чыгарылат. Инпутка сан киргизилген сайын, абзацта ошол сандын квадраты көрсөтүлүшүн камсыз кылыңыз.

Эки инпут жана абзац берилген. Инпуттарга сандар киргизилет. Абзацта киргизилген сандардын суммасы көрсөтүлүшүн камсыз кылыңыз.