Two-way binding (양방향 바인딩)

Angular의 양방향 바인딩 구문은 대괄호와 괄호의 조합입니다 [()]. 이 [()]구문은 다음과 같이 속성 바인딩 []괄호와 이벤트 바인딩 괄호를 결합 ()합니다.

 

<app-sizer [(size)]="fontSizePx"></app-sizer>

 

양방향 데이터의 내용은 속성, 이벤트(input, output)의 패턴을 사용하며 아래와 같이 사용해야합니다.

@Input() 속성의 이름

@Output() 속성의 이름 + Change

 

@Input()input;
@Output()inputChange;

@Input()size;
@Output()sizeChange;

 

이를 사용하게 된다면 예를들어

 

// 자식 컴포넌트

<div>
  <button (click)="dec()" title="smaller">-</button>
  <button (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

// 부모 컴포넌트


<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

// 기본값 설정
fontSizePx = 16;

 

 

[( )] 이 조합은 축약형입니다. (속성 바인딩, 이벤트 바인딩)

분리해서 적용할 수 있습니다.

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

 

 

 

참조

angular.io/guide/two-way-binding

Angular