Angularда икки тарафлама бағланиш

Шунингдек, Angularда иккилала компонентларнинг воқеаларини икки тарафлама бағлаш мумкин: ота-она ва фарзанд. Келинг, фарзанд HTML-шаблонида фойдаланувчи номи учун икки тарафлама бағланган инпут ва уни ўзгартирадиган функция ясаймиз:

<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

Энди фарзанд компонентимизга ўтиб, унга @Input декораторини импорт қиламиз. У инпутлар билан ишлаш учун керак:

import { Component, Input, Output, EventEmitter } from '@angular/core';

Кейин @Input декораторини фойдаланувчи номига бағлаймиз. Ва @Output декораторини userNameChange объектига бағлаймиз, у onNameChange функциясида чақирилади:

export class UserComponent {
	@Input() userName: string = '';
	@Output() userNameChange = new EventEmitter<string>();
	onNameChange(model: string) {
		this.userName = model;
		this.userNameChange.emit(model);
	}
}

Энди асосий компонентга ўтиб, унинг классига ном хоссасини қўшамиз:

export class AppComponent {
	name: string = 'alex';
}

Ва ота-она компонентининг HTML-шаблонида userName хоссасини ота-она компонентининг name хоссаси қиймати билан икки тарафлама бағлаймиз:

<user-data [(userName)]="name"></user-data>
<p>Сиз танлаган ном: {{ name }}</p>

Дарсда келтирилган мисолга асосан ота-она ва фарзанд компонентлари воқеаларининг икки тарафлама бағланишини амалга оширинг.

Олдинги вазифа асосида фойдаланувчи ёши учун икки тарафлама бағланиш яратинг.