Directive là các class thêm hành vi hoặc sửa đổi các phần tử trong DOM. Angular có ba loại: component (directive có template), directive structural (cấu trúc — thay đổi bố cục DOM), và directive attribute (thuộc tính — thay đổi giao diện/hành vi).
Chúng thêm hoặc xóa phần tử, và có tiền tố :
*<p *ngIf="isLoggedIn">Welcome back!</p> <!-- thêm/xóa dựa trên điều kiện -->
<li *ngFor="let item of items; let i = index"> <!-- lặp một phần tử cho mỗi item -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(Angular hiện đại cũng cung cấp cú pháp control-flow mới hơn @if / @for để thay thế *ngIf/*ngFor.)
Chúng sửa đổi một phần tử có sẵn mà không thêm/xóa nó:
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- bật/tắt class -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- style động -->
<input [(ngModel)]="name" /> <!-- two-way binding -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // dùng như <p appHighlight>
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // thay đổi phần tử host
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
Một directive tùy chỉnh nhận một tham chiếu tới phần tử host của nó và có thể phản ứng với các sự kiện — ở đây là highlight khi hover. Dùng như <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- được khai triển thành: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
Dấu * là cú pháp viết tắt bọc phần tử trong một <ng-template> — đó là lý do structural directive có thể thêm/xóa hoàn toàn phần tử.
Directive là cách Angular thao tác DOM theo kiểu khai báo.
Các structural directive (*ngIf/*ngFor/@if/@for) và attribute directive (ngClass/ngStyle/ngModel) có sẵn bao quát hầu hết nhu cầu, còn directive tùy chỉnh cho phép bạn đóng gói các hành vi DOM tái sử dụng (highlight, tooltip, click-outside).
Hiểu ba loại — và rằng component bản thân chúng là directive có template — là cốt lõi của mô hình template Angular.