Angular Fundamentals - Control Flow (@if/@for)

Introdução

O Angular 17 introduziu uma das maiores mudanças de template dos últimos anos: o novo Control Flow.

Ao invés de utilizar diretivas estruturais como:

<div *ngIf="user">{{ user.name }}</div>
 
<div *ngFor="let product of products">{{ product.name }}</div>

agora podemos escrever algo muito mais próximo de JavaScript:

@if (user) {
<p>{{ user.name }}</p>
} @for (product of products; track product.id) {
<p>{{ product.name }}</p>
}

Além da melhoria de legibilidade, o Angular passou a ter mais controle sobre o código gerado pelo compilador.

O que é Control Flow?

@if

Utilizado para renderização condicional.

Antes:

<div *ngIf="user">{{ user.name }}</div>

Agora:

@if (user) {
<div>{{ user.name }}</div>
}

O comportamento é o mesmo, mas a sintaxe é mais intuitiva.

@else

Permite tratar cenários alternativos.

@if (user) {
<h2>Bem-vindo {{ user.name }}</h2>
} @else {
<p>Carregando usuário...</p>
}

Muito mais legível do que trabalhar com:

<div *ngIf="user; else loading"></div>

e

<ng-template #loading> Carregando... </ng-template>

@for

Utilizado para renderizar coleções.

Antes:

<div *ngFor="let product of products">{{ product.name }}</div>

Agora:

@for (product of products; track product.id) {
<div>{{ product.name }}</div>
}

A importância do track

Perguntas.

Sem controle de identidade, o Angular pode recriar elementos desnecessariamente.

Exemplo:

products = [
  { id: 1, name: "Mouse" },
  { id: 2, name: "Teclado" },
];

Template:

@for (product of products; track product.id) {
<app-product-card [product]="product" />
}

Ao atualizar apenas um item, o Angular consegue reutilizar os componentes já existentes.

@empty

Permite exibir conteúdo quando a coleção estiver vazia.

@for (product of products; track product.id) {
<app-product-card [product]="product" />
} @empty {
<p>Nenhum produto encontrado.</p>
}

Antes era necessário criar lógica adicional usando *ngIf.

Por que o Angular criou o Control Flow?

Control Flow e Signals

O novo Control Flow foi projetado para funcionar perfeitamente com Signals.

users = signal<User[]>([]);

@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}

A combinação de Signals e Control Flow permite atualizações mais granulares e previsíveis.

Comparação

Casos de Uso

Perguntas de Entrevista