Ràng buộc sự kiện hai chiều trong Angular

Trong Angular cũng có thể thực hiện ràng buộc hai chiều các sự kiện của cả hai thành phần: thành phần cha và thành phần con. Hãy tạo trong mẫu HTML của thành phần con một input với ràng buộc hai chiều tên người dùng và hàm thay đổi tên:

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

Chuyển đến thành phần con của chúng ta và nhập trang trí @Input vào nó. Nó cần thiết để làm việc với các input:

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

Tiếp theo, ràng buộc trang trí @Input với tên người dùng. Và trang trí @Output ràng buộc với đối tượng userNameChange, sẽ được gọi trong hàm onNameChange:

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

Bây giờ chuyển đến thành phần chính và thêm thuộc tính tên vào lớp của nó:

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

Và trong mẫu HTML của thành phần cha thực hiện ràng buộc hai chiều thuộc tính userName với giá trị của thuộc tính name của thành phần cha:

<user-data [(userName)]="name"></user-data>
<p>You choose name: {{ name }}</p>

Thực hiện ràng buộc hai chiều các sự kiện của thành phần cha và thành phần con theo ví dụ được đưa ra trong bài học.

Trên cơ sở nhiệm vụ trước, hãy thực hiện ràng buộc hai chiều tuổi của người dùng.