დირექტივები არის კლასები, რომლებიც დამატებს ქცევას ან მოიფიცებს DOM-ის ელემენტებს. Angular-ს აქვს სამი ტიპი: კომპონენტები (დირექტივები template-ით), სტრუქტურული დირექტივები (მოიცვლიან DOM განლაგებას) და ატრიბუტის დირექტივები (მოიცვლიან გამოჩენას/ქცევას).
ისინი ამატებენ ან აშორებენ ელემენტებს და წინ აქვთ :
*<p *ngIf="isLoggedIn">Welcome back!</p> <!-- add/remove based on condition -->
<li *ngFor="let item of items; let i = index"> <!-- repeat an element per item -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(თანამედროვე Angular ასევე გთავაზობთ ახალ @if / @for მართვის მოთხოვნის სინტაქსს, რომელიც იცვლის *ngIf/*ngFor-ს.)
ისინი მოიცვლიან არსებულ ელემენტს მის დამატების/აშორების გარეშე:
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- toggle classes -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- dynamic styles -->
<input [(ngModel)]="name" /> <!-- two-way binding -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // used as <p appHighlight>
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // change the host element
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
კუთომი დირექტივი იღებს მითითებას მის ჯამურ ელემენტზე და შეუძლია რეაგირება ღटាქმეზე — აქ ხაზგასმა ღირებულებაზე. გამოიყენება როგორც <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* არის მოკლე სიტყვა, რომელიც მოიტანს ელემენტს <ng-template>-ში — ამიტომ სტრუქტურული დირექტივები შეუძლიათ ელემენტის სრულად დამატება/აშორება.
დირექტივები არის, თუ როგორ მუშაობს Angular-ი DOM-ს დეკლარაციულად.
ჩაშენებული სტრუქტურული (*ngIf/*ngFor/@if/@for) და ატრიბუტის (ngClass/ngStyle/ngModel) დირექტივები დიდი ნაწილის მოთხოვნილებებს ფარავს და კუთომი დირექტივები საშუალებას გაძლევთ შეაღებოთ თავისუფლად გამოყენებული DOM ქცევა (ხაზგასმა, tooltip, click-outside).
სამი კატეგორიის გაგება — და რომ კომპონენტები თავად არიან დირექტივები template-ით — არის Angular template მოდელის ძირითადი.