Directive는 DOM의 요소에 동작을 추가하거나 요소를 수정하는 클래스입니다. Angular에는 세 가지 종류가 있습니다. 컴포넌트(템플릿이 있는 directive), 구조(structural) directive(DOM 레이아웃 변경), 그리고 속성(attribute) directive(외형/동작 변경)입니다.
구조 directive — DOM 구조를 변경
요소를 추가하거나 제거하며, * 접두사가 붙습니다.
<p *ngIf="isLoggedIn">Welcome back!</p> <!-- 조건에 따라 추가/제거 -->
<li *ngFor="let item of items; let i = index"> <!-- 항목마다 요소 반복 -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(최신 Angular는 *ngIf/*ngFor를 대체하는 새로운 @if / @for 제어 흐름 구문도 제공합니다.)
요소를 추가/제거하지 않고 기존 요소를 수정합니다.
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- 클래스 토글 -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- 동적 스타일 -->
<input [(ngModel)]="name" /> <!-- 양방향 바인딩 -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // <p appHighlight>처럼 사용
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // 호스트 요소 변경
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
커스텀 directive는 자신의 호스트 요소에 대한 참조를 얻고 이벤트에 반응할 수 있습니다. 여기서는 hover 시 강조 표시를 합니다. <p appHighlight>Text</p>처럼 사용합니다.
<p *ngIf="x">...</p>
<!-- 다음으로 변환된다: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
*는 요소를 <ng-template>으로 감싸는 단축 표기입니다. 이것이 구조 directive가 요소를 통째로 추가/제거할 수 있는 이유입니다.
Directive는 Angular가 선언적으로 DOM을 조작하는 방법입니다.
내장 구조 directive(*ngIf/*ngFor/@if/@for)와 속성 directive(ngClass/ngStyle/ngModel)가 대부분의 요구를 충족하며, 커스텀 directive를 통해 재사용 가능한 DOM 동작(강조, 툴팁, 외부 클릭 감지)을 캡슐화할 수 있습니다.
세 가지 범주와, 컴포넌트 자체가 템플릿을 가진 directive라는 점을 이해하는 것은 Angular 템플릿 모델의 핵심입니다.