Olá pessoal, na nona aula do treinamento de Angular 20, iremos trabalhar com Controle de Fluxo.
A partir da versão 17 do Angular, podemos utilizar os controles de fluxo, responsáveis por criar uma página HTML mais dinâmica.
Conheça abaixo cada um dos controles de fluxo disponíveis:
Estrutura que utiliza uma condicional, além do @if, podemos utilizar o @elseif e o @else.
O @switch trabalha com os comandos @case e @default para termos uma estrutura de escolha.
Laço de repetição, utilizado geralmente para criar estruturas de tabelas e listas para exibir conteúdos de um vetor.
Abaixo compartilho uma tabela com todos os comandos que fazem parte do Controle de Fluxo:
| Bloco / Recurso | O que faz | Sintaxe/Exemplo curto | Notas |
|---|---|---|---|
| @if | Renderiza conteúdo quando a expressão é truthy. | @if (cond) { ... } |
Suporta @else if, @else e alias com ; as. |
| @else if | Caminho alternativo encadeado. | } @else if (outro) { ... } |
Você pode ter vários blocos. |
| @else | Fallback final do @if. |
} @else { ... } |
Apenas um por cadeia. |
| @switch | Seleciona um bloco baseado em valor. | @switch (expr) { ... } |
Comparação com ===; sem fallthrough. |
| @case | Opção dentro de @switch. |
@case ('admin') { ... } |
Pode ter vários @case. |
| @default | Fallback do @switch. |
@default { ... } |
Opcional; se ausente e sem match, nada é exibido. |
| @for | Itera coleções e repete um bloco. | @for (item of items; track item.id) { ... } |
track é obrigatório (id único, $index p/ listas estáticas, ou identity). |
| @empty | Conteúdo quando a coleção está vazia. | } @empty { ... } |
Vem logo após o bloco principal do @for. |
| Variáveis de contexto do @for | Dados úteis dentro do loop. | $index, $count, $first, $last, $even, $odd |
Podem ser aliadas: let idx = $index. |
| @defer | Adia o carregamento/render de conteúdo pesado. | @defer { <big-cmp/> } |
Troca única do placeholder para o conteúdo após o gatilho. |
| @placeholder | Mostra algo antes do @defer disparar. |
@placeholder (minimum 500ms) { ... } |
Carrega de forma eager; pode definir tempo mínimo. |
| @loading | Mostra enquanto o conteúdo adiado está carregando. | @loading (after 100ms; minimum 1s) { ... } |
Parâmetros evitam “pisca-pisca”. Eager. |
| @error | Fallback quando o carregamento adiado falha. | @error { ... } |
Eager; ideal para mensagens de erro. |
| Triggers do @defer — on | Quando disparar o carregamento. |
on idle, on viewport(ref?), on interaction(ref?),
on hover(ref?), on immediate, on timer(500ms)
|
Separe múltiplos com “;”. |
| Trigger do @defer — when | Carrega quando a condição fica truthy. | @defer (when cond) { ... } |
Operação única; não “volta” ao placeholder. |
| Prefetch do @defer | Busca antecipada dos recursos. | @defer (on viewport; prefetch on hover) |
Usa prefetch com o mesmo tipo de trigger. |
Compartilho a aula que está no YouTube, onde explico o uso dos controles de fluxo: