Módulo 4: Diretivas Estruturais (*ngIf, *ngFor)
2. Resumo da Aula Anterior
No Módulo 3, aprendemos sobre Property e Event Binding. Já sabemos como mostrar dados e reagir a cliques. Hoje, vamos aprender a controlar a estrutura do nosso site: decidir que partes do ecrã aparecem e repetir listas de dados automaticamente.
3. O Que Vais Aprender Hoje
- ✅ O que são Diretivas Estruturais e o uso do *.
- ✅ *ngIf: Mostrar ou remover elementos com lógica.
- ✅ *ngFor: Criar listas dinâmicas a partir de Arrays.
- ✅ Como o Angular manipula o DOM de forma inteligente.
4. Teoria: O Diretor de Cena
Conceito: As Diretivas Estruturais são "comandos" que damos ao Angular para que ele mude a estrutura da página. Elas começam sempre com um asterisco * porque fazem algo "mágico": apagam ou criam código HTML em tempo real.
🎬 Analogia: O Diretor de Teatro
Imagina que estás a dirigir uma peça de teatro:
- *ngIf (A Entrada): Tu dizes: "Se o ator estiver pronto, ele entra em cena. Se não, não existe ninguém naquele lugar do palco".
- *ngFor (O Exército): Em vez de chamares 50 soldados um a um, tu dizes: "Para cada soldado da minha lista, cria um duplicado no palco".
5. Exemplos Práticos
Exemplo 1: *ngIf (Lógica de Exibição)
Mostrar uma mensagem apenas se o utilizador estiver logado.
// No .ts
estaLogado = true;
Bem-vindo de volta!
Por favor, faça login para continuar.
Exemplo 2: *ngFor (Listas)
Gerar uma lista de frutas a partir de um Array.
// No .ts
frutas = ["Maçã", "Laranja", "Banana", "Pêra"];
- {{ f }}
Exemplo 3: Misturar as duas!
Mostrar a lista apenas se ela não estiver vazia.
Lista de Compras:
- {{ f }}
O seu carrinho está vazio.
6. Agora é a Tua Vez!
Vamos criar um "Painel de Notificações":
- No teu TS, cria um array de strings chamado
notificacoes. - No HTML, cria um botão que diz "Limpar Notificações" que apaga o array (
notificacoes = []). - Usa o *ngFor para mostrar cada notificação numa lista
<ul>. - Usa o *ngIf para mostrar uma mensagem "Sem notificações novas" apenas quando o array estiver vazio.
- Bónus: Adiciona um botão "Nova Notificação" que faz
push()de uma nova string para o array e vê a lista crescer sozinha!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Diretivas Estruturais alteram o layout do DOM adicionando ou removendo elementos.
- 📌 **Asterisco (*)**: É obrigatório para diretivas estruturais.
- 📌 **\*ngIf**: Condicional (Booleano).
- 📌 **\*ngFor**: Repetição (Loops).
- 📌 Sintaxe correta: `*ngFor="let item of lista"`.
9. Desafios Práticos
Desafio 1: O *ngIf vs CSS
Qual a diferença entre usar *ngIf="false" e style="display: none" no CSS?
Desafio 2: O Índice da Lista
Ao usar *ngFor, como podes obter o número da posição (índice) de cada item para mostrar algo como "1. Maçã, 2. Banana"?
Desafio 3: Lista de Objetos
Se tiveres users = [{nome: "A", idade: 20}, {nome: "B", idade: 30}], como mostrarias o nome de cada utilizador numa lista?