🚀 Capítulo 05: Diretivas Estruturais
🎯 Objetivo da Aula
Ao final desta aula, você será capaz de controlar a estrutura do seu HTML usando o Angular, decidindo se um elemento deve ou não aparecer na tela (*ngIf) e repetindo elementos para criar listas dinâmicas (*ngFor).
🏢 O Cenário Prático (Seu Desafio)
Um radar de nave precisa mostrar alertas de perigo quando a energia estiver baixa e listar todos os planetas detectados no sistema atual. Seu desafio é usar as diretivas estruturais do Angular para fazer esse radar funcionar!
🧠 Fundamentos: A Teoria Traduzida
Diretivas estruturais são comandos que mudam a estrutura do HTML (adicionando, removendo ou manipulando elementos). Elas sempre começam com um asterisco *.
1. *ngIf (O “Se” do HTML)
Serve para mostrar ou esconder um elemento baseado em uma condição verdadeira ou falsa.
- Sintaxe:
<div *ngIf="condicao">Conteúdo</div> - Exemplo: Se
combustivel < 10, o alerta aparece. Se não, ele some do HTML.
2. *ngFor (O “Para cada” do HTML)
Serve para repetir um elemento HTML para cada item de uma lista (array).
- Sintaxe:
<li *ngFor="let item of lista">{{ item }}</li> - Exemplo: Se você tem uma lista de compras, o Angular cria uma tag
<li>para cada produto automaticamente.
📖 Exemplo Guiado: Alerta de Energia e Lista de Planetas
Vamos atualizar o nosso componente do painel de controle.
🛠️ Passo a Passo (TypeScript)
Abra src/app/painel-controle/painel-controle.component.ts e adicione as variáveis:
export class PainelControleComponent {
nivelEnergia: number = 15;
planetasDetectados: string[] = ['Tatooine', 'Hoth', 'Dagobah', 'Endor'];
}🛠️ Passo a Passo (HTML)
Abra src/app/painel-controle/painel-controle.component.html e use as diretivas:
<div class="painel">
<!-- Usando *ngIf -->
<div *ngIf="nivelEnergia < 20" class="alerta-critico">
⚠️ ALERTA: Energia Crítica! ({{ nivelEnergia }}%)
</div>
<hr>
<!-- Usando *ngFor -->
<h3>🪐 Planetas no Sistema:</h3>
<ul>
<li *ngFor="let planeta of planetasDetectados">
{{ planeta }}
</li>
</ul>
</div>🕹️ Como Executar e Testar no VS Code
- Salve tudo e veja o navegador.
- Como a energia está em
15(menor que 20), o alerta vermelho deve aparecer! - A lista de planetas deve aparecer completa, com um item abaixo do outro.
🛠️ Prática Obrigatória 1
No seu TypeScript, crie uma variável chamada modoCombate (booleana) definida como false.
No HTML, crie uma mensagem de “SISTEMA DE ARMAS ATIVO” que só deve aparecer se o modoCombate for true. Crie também um botão para ligar/desligar esse modo (como fizemos no capítulo anterior).
🛠️ Prática Obrigatória 2
Crie um array de strings chamado tripulacao com os nomes: “Luke”, “Leia”, “Han Solo”, “Chewbacca”.
Exiba esses nomes em uma lista numerada (<ol>) na tela usando *ngFor. (Dica: pesquise como pegar o índice no ngFor usando let i = index).
🔑 Gabarito de Código/Fórmulas
Prática 1:
No .ts:
modoCombate: boolean = false;No .html:
<button (click)="modoCombate = !modoCombate">Alternar Combate</button>
<div *ngIf="modoCombate" style="color: red; font-weight: bold;">
⚔️ SISTEMA DE ARMAS ATIVO!
</div>Prática 2:
No .ts:
tripulacao: string[] = ['Luke', 'Leia', 'Han Solo', 'Chewbacca'];No .html:
<ol>
<li *ngFor="let membro of tripulacao; let i = index">
{{ i + 1 }} - {{ membro }}
</li>
</ol>