Modern Angular
Control flow não é só sintaxe mais limpa
@if, @for e @switch são mais úteis quando deixam estados de UI e identidade de lista explícitos. O control flow nativo ficou stable no Angular v18 (maio/2024) depois que a RFC #50719 fechou. Em produção, o ganho não é sintaxe; é o que os novos blocos forçam o time a nomear.
Limpo não basta
Eu gosto do control flow novo porque ele reduz malabarismo de template, mas 'sintaxe mais limpa' não é motivo forte para abrir uma migração ampla. Em app maduro, eu quero que a mudança exponha uma decisão real de UI: loading, erro, vazio, pronto, identidade ou estado finito.
Esse recorte mantém a migração útil. Um template já tocado pode ficar mais fácil de revisar sem transformar a base inteira em campanha de sintaxe.
O que cada bloco deve provar
| Bloco | Bom uso em produção | Pergunta de review |
|---|---|---|
@if | Substituir branches espalhados em ng-template | O caminho principal e o fallback ficaram mais fáceis de ler? |
@for | Renderizar listas dinâmicas com identidade explícita | O track usa id estável ou só conveniência? |
@empty | Tornar estados vazios visíveis | A UI antiga renderizava nada sem explicar? |
@switch | Representar estados de UI mutuamente exclusivos | O estado é finito e tipado? |
@defer | Adiar UI realmente pesada | Qual JavaScript sai do caminho inicial? |
A decisão de identidade da lista
@for exigir track não é burocracia. Ele força o time a decidir como o DOM se relaciona com os dados. Isso importa para linhas com inputs, foco, animação e componentes repetidos com estado interno.
Se o backend entrega um id estável, use. Se não entrega, pergunte se a UI está escondendo um problema de modelagem. Usar identidade do objeto ou index pode servir para listas estáticas, mas não deveria ser o default para dados dinâmicos de produto.
Eu questionaria track $index em uma lista de produto que pode ser ordenada ou filtrada. Ele pode preservar estado na linha errada quando a ordem muda, que é exatamente o tipo de bug que uma migração de sintaxe não deveria introduzir.
@for (order of filteredOrders(); track $index) {
<app-order-row [order]="order" />
}@switch (ordersState()) {
@case ('loading') {
<app-orders-skeleton />
}
@case ('empty') {
<app-empty-orders />
}
@case ('ready') {
@for (order of orders(); track order.id) {
<app-order-row [order]="order" />
}
}
}Uma migração que eu aceitaria
Eu aceitaria um PR de control flow quando o time já está mexendo na tela e o diff melhora uma de três coisas: modelo de estado mais claro, decisão correta de track ou estado vazio/fallback útil.
Eu questionaria um PR no repositório inteiro que só troca sintaxe. O código pode compilar, mas o custo de review é real e o produto não aprendeu nada.
Artefato para reaproveitar
Checklist de review para control flow
- Migre templates já tocados, não o repositório inteiro por default.
- Use
@forcom identidade estável para dados dinâmicos. - Adicione
@emptyquando a UI antiga não mostrava nada. - Use
@switchpara estados finitos em vez de condições empilhadas. - Use
@deferapenas quando ele muda custo de carregamento ou experiência.
Fontes consultadas
- https://angular.dev/guide/templates/control-flow
- https://angular.dev/reference/migrations/control-flow
- https://angular.dev/guide/templates/defer
- https://github.com/angular/angular/discussions/50719
- https://blog.angular.dev/meet-angulars-new-control-flow-a02c6eee7843
- https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe
Modern Angular Playbook
Este artigo é um play.
O Playbook do Angular Moderno reúne o diagnóstico, a matriz de adoção, onze jogadas e o plano de 30 dias. Grátis, em inglês e português.
Você recebe os dois PDFs por email, pela lista do Dojo IA.
André Ramosdisponível para vagas remotas, UTC−3Entre em contato →