디렉티브는 엘리먼트에 어떤 동작을 추가하는 클래스인스턴스다.
앵귤러는 기본적으로 폼, 목록, 스타일에 적용할 수 있는 디렉티브를 다양하게 제공한다.
어트리뷰트 디렉티브 : 엘리먼트, 컴포넌트의 모습을 변경하거나 동작을 추가하는 디렉티브
구조디렉티브 : 조건에따라 DOM에 엘리먼트를 추가하거나 삭제하는 디렉티브
기본 어트리뷰트 디렉티브
NgClass : 클래스를 추가하거나 제거한다.
간단한 CSS클래스조작은 클래스어트리뷰트바인딩을 사용하는 것이 좋다.
<div [ngClass]="isSpecial?'special':'clearance'">This is Test.</div>
<div [class]="isSpecial?'special':'clearance'">This is Test.</div>ngClass만의 고유기능이 문지 모르겠네......?
class어트리뷰트바인딩만을 사용하는것이 좋다.
주의사항
클래스내용을 객체로 만들어서 바인딩하면 객체프로퍼티값이 변경되어도 변화감지매커니즘은 변경되지 않은 것으로 판단한다.
<div [ngClass]="currentClasses">This is Test.</div>
setCurrentClasses() {
this.currentClasses = {
clearance: !this.isClearance,
special: this.isSpecial
};
}함수를 만들어서 새로운 리터럴객체를 할당하면 변화감지가 작동한다.
NgStyle : 스타일을 추가하거나 제거한다.
ngStyle도 ngClass와 같은 방법으로 적용이 가능하다.
