Czym są dyrektywy w Angular?

Dyrektywy to klasy, które dodają zachowanie lub modyfikują elementy w DOM. Angular ma trzy rodzaje: komponenty (dyrektywy z szablonem), dyrektywy strukturalne (zmieniają układ DOM), i dyrektywy atrybutów (zmieniają wygląd/zachowanie).

Dyrektywy strukturalne — zmieniają strukturę DOM

Dodają lub usuwają elementy i są poprzedzone *:

<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>

(Nowoczesny Angular oferuje także nowszą składnię kontroli przepływu @if / @for, która zastępuje *ngIf/*ngFor.)

Dyrektywy atrybutów — zmieniają wygląd/zachowanie

Modyfikują istniejący element bez jego dodawania/usuwania:

<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- toggle classes -->
<div [ngStyle]="{ color: textColor }">...</div>                  <!-- dynamic styles -->
<input [(ngModel)]="name" />                                       <!-- two-way binding -->

Pisanie niestandardowej dyrektywy atrybutu

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 = "";
  }
}

Niestandardowa dyrektywa otrzymuje odniesienie do swojego elementu hosta i może reagować na zdarzenia — tutaj podświetlanie przy najechaniu. Używana jako <p appHighlight>Text</p>.

Dlaczego dyrektywy strukturalne używają *

<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>

* to skrót, który opakowuje element w <ng-template> — dlatego dyrektywy strukturalne mogą całkowicie dodawać/usuwać element.

Dlaczego to ważne

Dyrektywy to sposób, w jaki Angular manipuluje DOM deklaratywnie.

Wbudowane dyrektywy strukturalne (*ngIf/*ngFor/@if/@for) i atrybutów (ngClass/ngStyle/ngModel) pokrywają większość potrzeb, a niestandardowe dyrektywy umożliwiają hermetyzację wielokrotnie użytecznego zachowania DOM (podświetlenie, tooltip, click-outside).

Zrozumienie trzech kategorii — i faktu, że komponenty same w sobie są dyrektywami z szablonami — stanowi sedno modelu szablonów Angular.