Angular의 양방향 이벤트 바인딩

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

app/user/user.component.html<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

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

app/user/user.component.tsimport { Component, Input, Output, EventEmitter } from '@angular/core';

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

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

이제 메인 컴포넌트로 이동하여 해당 클래스에 이름 속성을 추가합니다:

app/app.component.tsexport class AppComponent {
  name: string = 'alex';
}

그리고 부모 컴포넌트의 HTML 템플릿에서 속성 userName과 부모 컴포넌트의 속성 name 값에 대한 양방향 바인딩을 수행합니다:

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