Maagizo ni darasa ambayo huongeza tabia au hubadilisha vipengele katika DOM. Angular ina aina tatu: sehemu (maagizo yenye kiolezo), maagizo ya muundo (kubadilisha muundo wa DOM), na maagizo ya sifa (kubadilisha muonekano/tabia).
Yanapongeza au kuondoa vipengele, na yana kiambishi :
*<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 ya kisasa pia inatoa sintaksi mpya ya mtiririko wa udhibiti @if / @for inayobadilisha *ngIf/*ngFor.)
Yanabadilisha kipengele kilicho na mwanzo bila kuongeza/kuondoa:
<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 = "";
}
}
Agizo lililobadilishwa hupokea kumbukumbu ya kipengele chake na inaweza kujibu matukio — hapa, kuangazana kwa kusimama. Inatumika kama <p appHighlight>Maandishi</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* ni njia fupi ambayo inawezesha kipengele katika <ng-template> — ndio maana maagizo ya muundo yanaweza kuongeza/kuondoa kipengele kabisa.
Maagizo ni jinsi Angular inavyobadilisha DOM kwa njia ya pendamatuhuzi.
Maagizo yaliyojengwa ya muundo (*ngIf/*ngFor/@if/@for) na sifa (ngClass/ngStyle/ngModel) yanayashughulikia mahitaji mengi, na maagizo ya mwenyewe yanakuwezesha kuandika tabia ya DOM inayoweza kuongezwa (kuangazana, onyo, klic-nje).
Kuelewa aina tatu — na kwamba sehemu zenyewe ni maagizo yenye kiolezo — ni msingi wa mfano wa kiolezo cha Angular.