Angular는 컴포넌트의 프로퍼티와 뷰를 동기화시키는 데이터 바인딩을 지원한다.
1) 컴포넌트의 프로퍼티 값을 템플릿에 표시하려면 이중 중괄호를 사용한다.
<h1>Hello {{ name }}!</h1>
2) HTML 엘리먼트의 값을 컴포넌트 프로퍼티로 바인딩하려면 대괄호를 사용한다.
<span [hidden]="isValid">The filed is required</span>
3) 엘리먼트에서 발생한 이벤트를 이벤트 핸들러에 연결하려면 괄호를 사용한다.
<button (click)="placeBid()">Place Bid</button>
4) 템플릿에서 다른 엘리먼트의 프로퍼티를 참조할 때 #으로 시작하는 템플릿 지역 변수를 사용할 수 있으며, 이 변수는 DOM 객체에 저장되어 객체를 사용하듯이 접근할 수 있다.
<input #title type="text" /> <span>{{ title.value }}</span>
데이터 바인딩은 애플리케이션의 데이터를 화면과 연결하는 기능이며, 데이터 바인딩을 사용하면 개발자가 직접 코딩해야 하는 양을 많이 줄일 수 있다.
<h1>Hello {{ name }}!</h1> <span [hidden]="isValid">This field is required</span> <button (click)="placeBid()">Place Bid</button>
Angular에서 데이터 바인딩은 기본적으로 단방향이다. 여기에서 단뱡향이라는 것은 컴포넌트 프로퍼티에 화면을 향하는 방향이거나, 화면에서 발생한 이벤트가 컴포넌트 메소드를 향하는 방향이라는 것을 의미한다. 예를 들어 컴포넌트에 있는 productTitle 프로퍼티 값이 변경되면 바인딩된 템플릿의 {{ productTitle}} 표현식은 자동으로 갱신되는데, 이 바인딩은 컴포넌트 프로퍼티에서 화면을 향하는 방향이라고 할 수 있다. 이와 비슷하게, 사용자가 <input> 필드에 값을 입력하면 이벤트와 바인딩된 이벤트 핸들러 함수가 실행되는데, 이 바인딩은 화면에서 발생한 이벤트가 컴포넌트 메소드를 향하는 방향이라고 할 수 있다.