디렉티브는 DOM의 모든것(모양과 동작)을 관리하기위한 지시자다.
HTML 요소노드의 어트리뷰트 형태로 사용하며 호스트 요소노드에 무언가를 행하는 지시자다.
디렉티브는 어플리케이션 전역에서 사용되는 것으로 컴포넌트에서 분리하여 구현한것이다.
어트리뷰트 디렉티브(Attribute Directives)
HTML 요소의 어트리뷰트와 같이 사용하여 호스트 요소의 모양이나 동작을 제어한다. ngClass, ngStyle와 같은 빌트인 어트리뷰트 디렉티브가 있다.
구조 디렉티브(Structural Directives)
DOM 요소를 반복 생성(ngFor), 조건에 의한 추가 또는 제거(ngIf, ngSwitch)를 통해 DOM 레이아웃(layout)을 변경한다.
어트리뷰트 디렉티브
ngClass
여러 개의 CSS 클래스를 추가 또는 제거한다. 한 개의 클래스를 추가 또는 제거할 때는 클래스 바인딩을 사용하는 것이 좋다.
<element [ngClass]="문자열 | 배열 | 객체">...</element><div [ngClass]="'text-bold color-blue'">...</div>CSS클래스 이름이 공백문자로 구분된 문자열
<div [ngClass]="['text-bold', 'color-blue']">...</div>CSS 클래스 이름의 요소로 구성된 배열
<div [ngClass]="{ 'text-bold': true, 'color-blue': false }">...</div>CSS 클래스 이름을 프로퍼티 이름으로, boolean 타입을 프로퍼티 값으로 갖는 객체
구조 디렉티브(Built-in structural directive)
구조디렉티브는 DOM 요소노드를 반복생성(ngFor), 조건에의한 추가 또는 제거(ngIf, ngSwitch)로 뷰를 변경한다.
구조디렉티브는 *접두사를 사용하며 []를 사용하지 않는다.
디렉티브가 사용된 호스트 요소노드에는 하나의 디렉티브만 사용할 수 있다.
ngIf
<element *ngIf="expression">...</element>ngIf디렉티브는 우변표현식이 참이면 호스트요소노드가 DOM에 추가되고 그렇지 않으면 DOM에서 제거된다.
<ng-template [ngIf]="expression">
<element>...</element>
</ng-template>ngIf디렉티브의 정식표현이며 *를 사용하면 단축표현이 된다.
<p *ngIf="isShow">Lorem ipsum dolor sit amet</p>
<p [style.display]="isShow?'block':'none'">Lorem ipsum dolor sit amet</p>
<button (click)="isShow=!isShow" >{{isShow?'hide':'show'}}</button>ngIf디렉티브를 사용하지 않고 스타일바인딩 또는 클래스바인딩을 사용하여 보이지않는 요소노드는 랜더링되지 않지만 DOM에는 남아있다.
<!-- if else -->
<element *ngIf="expression; else elseBlock">Truthy condition</element>
<ng-template #elseBlock>Falsy condition</ng-template>
<!-- if else -->
<element *ngIf="expression; then thenBlock else elseBlock"></element>
<ng-template #thenBlock>Truthy condition</ng-template>
<ng-template #elseBlock>Falsy condition</ng-template>
<!-- if -->
<element *ngIf="expression; then thenBlock"></element>
<ng-template #thenBlock>Truthy condition</ng-template>ngFor
ngFor디렉티브는 컴포넌트 클래스의 컬렉션(이터러블객체)을 반복하여 호스트요소및 하위요소를 DOM에 추가한다.
<element *ngFor="let item of items">...</element>
<element *ngFor="let item of items; let i=index; let odd=odd; trackBy: trackById">...</element>