AngularJs 2 - 데이터 바인딩 - One Way

이전 글의 AppComponent에서 click 이벤트에 의한 select를 구현했다. 선택된 항목에 대한 표시를 해주는게 사용자에게 편할 것이다. 이를 위해 프로퍼티 바인딩이라는 것이 필요하다. 말은 거창하지만 코드는 길지 않다.

	<h1>{{title}}</h1>
	<div class="code-title">
	<ul *ngIf="codes.length">
	<li *ngFor="#code of codes" (click)="onSelect(code)" [class.selected]="selected === code">{{code.title}}</li>
	</ul>
	</div>
	<div *ngIf="selected" class="code-content">
	{{selected.content}}
	</div>

view raw app.component.html hosted with ❤ by GitHub

4번째 줄의 [class.selected] = selected === code라는 코드가 하는 일을 AngularJs 에서는 바인딩이라고 부른다. 예는 엄밀히는 CSS class 바인딩이라고 하는데 쓰는 방법은 프로퍼티도 같다. [] 안에 바인딩할 이름이 들어가면 된다.

바인딩에 대한 자세한 설명은 가이드를 참고하자.