Diretivas são classes que adicionam comportamento ou modificam elementos no DOM. Angular tem três tipos: componentes (diretivas com um template), diretivas estruturais (alteram o layout do DOM), e diretivas de atributo (alteram aparência/comportamento).
Elas adicionam ou removem elementos e são prefixadas com :
*<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>
(O Angular moderno também oferece a sintaxe de fluxo de controle @if / @for mais recente que substitui *ngIf/*ngFor.)
Elas modificam um elemento existente sem adicioná-lo/removê-lo:
<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 = "";
}
}
Uma diretiva personalizada obtém uma referência ao seu elemento host e pode reagir a eventos — aqui, destacando ao passar o mouse. Usada como <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
O * é uma abreviação que envolve o elemento em um <ng-template> — é por isso que as diretivas estruturais podem adicionar/remover o elemento completamente.
Diretivas são como o Angular manipula o DOM de forma declarativa.
As diretivas estruturais (*ngIf/*ngFor/@if/@for) e de atributo (ngClass/ngStyle/ngModel) integradas cobrem a maioria das necessidades, e as diretivas personalizadas permitem encapsular comportamentos reutilizáveis do DOM (destaque, tooltip, click-outside).
Compreender as três categorias — e que componentes são eles próprios diretivas com templates — é essencial para o modelo de template do Angular.