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">

Энди, агар кодни ишга тушириб, инпутга матн кирита бошласак, ушбу матн дивда дарҳол кўрина бошлайди.

Инпут ва абзац берилган. Инпутга сон чиқарилади. Инпутга сон киритилганда, абзацда ушбу соннинг квадрати кўринадиган қилинг.

Иккита инпут ва абзац берилган. Инпутларга сонлар киритилади. Абзацда киритилган сонларнинг йиғиндиси кўринадиган қилинг.