Data binding

프레임워크 없이 데이터 바인딩을 하는 경우 데이터 값을 HTML 컨트롤로 푸시하고
사용자의 응답을 액션 및 값 업데이트로 변환해야 합니다.
그러한 push/pull 로직을 직접 작성하는 것은 낡은 방식이며 오류 발생의 여지가 있습니다.

이에 Angular2는 템플릿 HTML일부에 바인딩 마크업을 추가하여 양쪽을 연결하고
구성요소의 일부와 조율하는 메커니즘인 데이터 바인딩을 지원합니다.
다이어 그램에서 볼 수 있듯이 4가지 형태의 바인딩 구문이 있습니다.
각 양식은 DOM간의 양방향을 나타냅니다.

아래 예제 템플릿에는 3가지 형식이 있습니다.

app/hero-list.component.html (binding)

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero""></hero-detail>
<li (click)="selectHero(hero)></li>

{{hero.name}} - <li> 태그 내에 hero.name의 속성 값을 표출합니다.
[hero] - selectedHero 값을 부모인 HeroListComponent에서 자식인 HeroDetailComponent의 hero 속성으로 전달합니다.
(click) - 사용자가 hero를 클릭하면 이벤트 바인딩의 구성요소의 seelectHero 메서드를 호출합니다.

양방향 데이터 바인딩은 ngModel 지시문을 사용하여 속성 및 이벤트 바인딩을 단일 표기법으로
결합하는 중요한 4번째 형식입니다.
다음은 HeroDetailComponet 템플릿의 예제입니다.

app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

양방향 바인딩에서 데이터 속성 값은 속성 바인딩과 마찬가지로 구성요소의 입력상자로 이동합니다.
사용자의 변경사항은 구성요소로 다시 전달되어 이벤트 바인딩과 마찬가지로 등록 정보를 최신 값으로 재설정합니다.

Angular는 모든 자식 구성요소를 통해 응용프로그램 구성요소 트리의 루트에서
Event Cycle마다 한 번 씩 모든 데이터 바인딩을 처리합니다.

데이터 바인딩은 템플릿과 해당 구성요소간의 통신에서 중요한 역할을 합니다.
부모 / 자식간의 데이터 바인딩은 부모 구성요소와 하위 구성 요소간의 통신에도 중요합니다.