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

BlocoBom uso em produçãoPergunta de review
@ifSubstituir branches espalhados em ng-templateO caminho principal e o fallback ficaram mais fáceis de ler?
@forRenderizar listas dinâmicas com identidade explícitaO track usa id estável ou só conveniência?
@emptyTornar estados vazios visíveisA UI antiga renderizava nada sem explicar?
@switchRepresentar estados de UI mutuamente exclusivosO estado é finito e tipado?
@deferAdiar UI realmente pesadaQual 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.

Identidade ruim em lista dinâmicahtml
@for (order of filteredOrders(); track $index) {
  <app-order-row [order]="order" />
}
Estado de template com identidade explícitahtml
@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 @for com identidade estável para dados dinâmicos.
  • Adicione @empty quando a UI antiga não mostrava nada.
  • Use @switch para estados finitos em vez de condições empilhadas.
  • Use @defer apenas quando ele muda custo de carregamento ou experiência.

Fontes consultadas

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.

Abrir playbook →

André Ramosdisponível para vagas remotas, UTC−3Entre em contato →

Leia também

Guia · 7 min

Standalone sem transformar NgModules em vilões

Uma regra prática para usar componentes standalone, providers por rota e NgModules remanescentes em aplicações Angular maduras.

Ler artigo →

Guia · 10 min

Um plano de 30 dias para modernizar apps Angular maduros

Um plano de modernização para times que precisam de auditoria, mudanças de baixo risco, spikes isolados e decisões que sobrevivem a code review.

Ler artigo →

Nota · 6 min

Como eu adotaria Signal Forms agora que são estáveis no Angular 22

Um filtro de adoção pra Signal Forms agora que são estáveis no Angular 22: use em forms novos, mantenha reactive forms onde já funcionam.

Ler artigo →