Diretivas
*ngFor, *ngIf, ngClass e ngModel
Diretivas são instruções no template que modificam o comportamento ou aparência de elementos HTML. Diretivas estruturais (prefixo *) alteram a estrutura do DOM — adicionam, removem ou repetem elementos. Diretivas de atributo modificam a aparência ou comportamento sem mudar a estrutura.
*ngFor itera sobre um array e replica o elemento para cada item, funcionando como um for...of no template. *ngIf adiciona ou remove o elemento do DOM com base em uma condição — diferente de esconder com display:none, o elemento é realmente removido/criado. *ngSwitch funciona como um switch/case para múltiplas condições.
ngClass e ngStyle aplicam classes e estilos condicionalmente. [(ngModel)] cria two-way data binding com inputs — requer importar o FormsModule. Angular 17+ introduziu a nova sintaxe de controle de fluxo: @for, @if, @switch, que substitui as diretivas estruturais com sintaxe mais ergonômica.
<!-- ── *ngFor: iteração ─────────────────────────── -->
<ul>
<li *ngFor="let item of produtos; index as i; trackBy: rastrearPorId">
{{ i + 1 }}. {{ item.nome }} — R$ {{ item.preco | currency }}
</li>
</ul>
<!-- ── *ngIf com else ────────────────────────────── -->
<div *ngIf="usuario; else semUsuario">
Bem-vindo, {{ usuario.nome }}!
</div>
<ng-template #semUsuario>
<p>Por favor, faça login.</p>
</ng-template>
<!-- ── ngClass: classes condicionais ─────────────── -->
<div [ngClass]="{ 'ativo': estaAtivo, 'erro': temErro, 'grande': tamanho === 'lg' }">
Conteúdo
</div>
<!-- ── *ngSwitch ─────────────────────────────────── -->
<div [ngSwitch]="status">
<p *ngSwitchCase="'carregando'">⏳ Carregando...</p>
<p *ngSwitchCase="'erro'">❌ Erro ao carregar</p>
<p *ngSwitchCase="'sucesso'">✅ Dados carregados!</p>
<p *ngSwitchDefault>Estado desconhecido</p>
</div>
<!-- ── Sintaxe moderna (Angular 17+) ─────────────── -->
@for (item of produtos; track item.id) {
<li>{{ item.nome }}</li>
}
@if (usuario) {
<p>Olá, {{ usuario.nome }}</p>
} @else {
<p>Faça login</p>
}Sempre use trackBy com *ngFor em listas grandes. Sem ele, o Angular re-renderiza todos os elementos a cada mudança. TrackBy diz ao Angular como identificar um item, permitindo reutilizar elementos DOM existentes.