<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">프로퍼티바인딩은 DOM과 연결되어있고 boolean값에 대응하여 직관적이며 어트리뷰트바인딩보다 빠르다.
어트리뷰트바인딩값은 HTML 문법기준으로 처리하기때문에 값이 null기준으로 한다.
앵귤러에서 바인딩은 HTML어트리뷰트와 DOM프로퍼티를 구분한다.
앵귤러에서 HTML어트리뷰트는 오직 한가지, 요소노드와 디렉티브를 초기화하는 역활만한다.
따라서 뷰를 다루기위한 바인딩은 DOM프로퍼티에 바인딩하는것이 좋다.
<input type="text" value="Sarah">브라우저는 위코드를 파싱할때 DOM에 요소노드를 생성하고 value프로퍼티를 'Sarah'로 초기화한다.
이후에 input 요소노드의 DOM value프로퍼티를 'sally'값으로 변경할 수 있다.
input.getAttribute('value')으로 input요소노드의 value어트리뷰트에 접근하면 이전값인 'Sarah'를 얻게된다.
value HTML어트리뷰트는 초기화값을 보관하고 value DOM프로퍼티는 현재의 값을 보관한다.
<button disabled>Test Button</button>diabled HTML어트리뷰트는 속성값이 없기때문에 직관적이지 않다.
<input [attr.disabled]="condition ? 'disabled' : null">
<input [attr.disabled]="condition ? '0' : null">HTML어트리뷰트 바인딩하려면 null값을 할당할때 disabled되고 나머지값들은 enabled화 시킨다.
이래서 HTML어트리뷰트는 다루기 불편하고 처리속도면에서도 좋지않다.
<input [disabled]="condition ? true : false">DOM 프로퍼티로 제어하는 것이 좋다.
{{}}, [] 기호는 소스에서 뷰로 단방향 바인딩을 의미한다.
()기호는 뷰에서 소스로 단방향 바인딩을 의미한다.
[()]기호는 양방향 바인딩을 의미한다.
프로퍼티바인딩
<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>이벤트바인딩
<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>양방향바인딩
<input [(ngModel)]="name">어트리뷰트바인딩
<button [attr.aria-label]="help">help</button>클래스바인딩
<div [class.special]="isSpecial">Special</div>스타일바인딩
<button [style.color]="isSpecial ? 'red' : 'green'">