HTML엘리먼트에는 어트리뷰트와 DOM프로퍼티가 있으며 DOM프로퍼티에 템플릿표현식으로 바인딩하는 것이 좋다.
하지만 특정 HTML 특정속성은 어트리뷰트만 존재하여 부득이 어트리뷰트바인딩을 사용해야하는 경우가 있다.
ARIA와 SVG에는 어트리뷰트만 존재한다.
<p [attr.대상-어트리뷰트]="표현식"></p>클래스어트리뷰트바인딩
<div [class]="special" >This is Test. </div>[class]는 div요소노드의 class어트리뷰트를 바인딩한다는 의미로서 div요소노드는 class라는 DOM프로퍼티가 없다.
special은 템플릿표현식으로서 앵귤러가 평가한 결과값을 생각해야 한다.
결과값이 클래스명이어야 하고 "my-class-1 my-class-2 my-class-3", {my-class-1: true, my-class-2: false}, [my-class-1, my-class-2] 3가지 형식을 사용할 수 있다.
<div [class]="expr" >This is Test. </div>
<div [class.special]="expr" >This is Test. </div>div에 하나의 클래스를 적용하는 방법
1. expr이 평가결과 하나의 클래스명
2. 하나의 클래스어트리뷰트설정 expr은 true 또는 false로 평가결과
스타일 어트리뷰트 바인딩
HTML요소노드의 스타일을 동적으로 제어하기위한 바인딩
스타일 하나 바인딩하기
<div [style.background-color]="expr" >This is Test.
</div>
<div [style.backgroundColor]="expr" >This is Test. </div>expr은 표현식으로 true또는 false로 평가되어야 한다.
스타일어트리뷰트는 하이픈과 커멜표기법 2가지다 지원한다.
스타일 여러개 바인딩하기 ```
This is Test.
expr = 'font-size: 1.2rem; color: cornflowerblue;';
expr = {fontSize:'1.2rem', color:'cornflowerblue'};
객체표현식에는 key이름에 -하이픈을 사용할 수 없다.
