Angular의 양방향 이벤트 바인딩

Angular에서는 부모와 자식 두 컴포넌트의 이벤트에 대한 양방향 바인딩을 만들 수도 있습니다. 자식 HTML 템플릿에 사용자 이름에 대한 양방향 바인딩이 있는 입력 필드와 이름을 변경하는 함수를 만들어 봅시다:

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

자식 컴포넌트로 이동하여 데코레이터 @Input을 가져옵니다. 이 데코레이터는 입력 필드 작업에 필요합니다:

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

다음으로 데코레이터 @Input를 사용자 이름에 바인딩합니다. 그리고 데코레이터 @Output를 함수 onNameChange에서 호출될 객체 userNameChange에 바인딩합니다:

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>You choose name: {{ name }}</p>

강의에 제공된 예시에 따라 부모 및 자식 컴포넌트의 양방향 이벤트 바인딩을 구현하세요.

이전 작업을 기반으로 사용자 나이에 대한 양방향 바인딩을 구현하세요.