Drejtimet janë klasa që shtohen sjelljen ose modifikojnë elementet në DOM. Angular ka tre lloje: komponentë (drejtime me një shabllon), drejtime strukturore (ndryshojnë paraqitjen e DOM-it) dhe drejtime atributesh (ndryshojnë pamjen/sjelljen).
Ato shtojnë ose hequn elemente, dhe kanë parashtesën :
*<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 modern gjithashtu ofron sintaksën më të re të rrjedhës së kontrollit @if / @for që zëvendëson *ngIf/*ngFor.)
Ato modifikojnë një element ekzistues pa e shtuar/hequr atë:
<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 = "";
}
}
Një direktivë e personalizuar merr referencën në elementin e saj nizon dhe mund të reagojë në ngjarje — këtu, theksim në libërimin. Përdorur si <p appHighlight>Tekst</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* është një shkurtesë që e përfshiron elementin në një <ng-template> — prandaj drejtimet strukturore mund ta shtojnë/heqin elementin plotësisht.
Drejtimet janë se si Angular manipulon DOM-in në mënyrë deklarative.
Drejtimet e integruara strukturore (*ngIf/*ngFor/@if/@for) dhe atributeve (ngClass/ngStyle/ngModel) mbulojnë shumicën e nevojave, dhe drejtimet e personalizuara ju lejojnë të përfshini sjellje të zgjidhueshme të DOM-it (theksim, këshillë, klik jashtë).
Kuptimi i tre kategorive — dhe se komponentet janë vetë drejtime me shabllone — është bërthama e modelit të shabllonit të Angular-it.