Módulo 6: Estilização Avançada (ngClass e ngStyle)
2. Resumo da Aula Anterior
No Módulo 5, aprendemos a fazer os componentes falarem entre si com @Input e @Output. Agora que os nossos componentes já comunicam, vamos aprender a torná-los visualmente dinâmicos, mudando cores e classes CSS com base no que acontece no código.
3. O Que Vais Aprender Hoje
- ✅ [ngClass]: Adicionar ou remover classes condicionalmente.
- ✅ [ngStyle]: Alterar estilos inline com lógica TypeScript.
- ✅ Como criar interfaces que reagem visualmente ao estado da aplicação.
- ✅ Diferença entre Property Binding de estilo e as diretivas NG.
4. Teoria: O Camaleão Digital
Conceito: Em vez de usares JavaScript puro para manipular o classList, o Angular dá-te diretivas poderosas que observam o teu código e aplicam o design automaticamente.
🦎 Analogia: O Camaleão e o Termómetro
Imagina um camaleão robótico no teu site:
- [ngClass] (O Disfarce): Se o camaleão está na selva, ele veste o "fato" de selva (Classe CSS 'selva'). Se está no deserto, ele muda para o fato de deserto (Classe CSS 'deserto'). A classe muda conforme o lugar.
- [ngStyle] (O Termómetro): Se a temperatura sobe, a pele dele vai ficando cada vez mais vermelha (Mudança gradual de cor inline).
5. Exemplos Práticos
Exemplo 1: [ngClass] com Objetos
Aplicar a classe 'sucesso' apenas se estiver tudo OK.
// No .ts
estaFinalizado = true;
temErros = false;
Conteúdo do Alerta
Exemplo 2: [ngStyle] para Valores Dinâmicos
Mudar o tamanho de uma barra de progresso.
// No .ts
progressoAtual = 75; // percentagem
Exemplo 3: Atalhos de Propriedade
Mudar apenas uma propriedade específica.
Texto Dinâmico
6. Agora é a Tua Vez!
Vamos criar o "Cartão de Estado de Energia":
- Cria uma variável
nivelBateria = 50(número). - Cria uma
<div>que representa a bateria. - Usa o [ngStyle] para que a largura (width) da div seja igual ao
nivelBateria + '%'. - Cria CSS para duas classes:
.bateria-baixa(vermelho) e.bateria-cheia(verde). - Usa o [ngClass] para aplicar
.bateria-baixase o nível for inferior a 20, e.bateria-cheiase for superior a 80. - Adiciona botões de "Carregar" (+10) e "Gastar" (-10) e vê o estilo mudar em tempo real!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **[ngClass]** é ideal para gerir conjuntos de classes CSS via objetos ou arrays.
- 📌 **[ngStyle]** é perfeito para valores que mudam (como tamanhos, cores RGB, posições).
- 📌 Podes usar atalhos como
[class.nome-classe]para condições simples. - 📌 O Angular remove automaticamente as classes/estilos quando as condições deixam de ser verdadeiras.
9. Desafios Práticos
Desafio 1: O Botão Arco-Íris
Como farias para que a cor de fundo de um botão mudasse para uma cor aleatória sempre que clicas nele, usando [ngStyle]?
Desafio 2: Temas Dark/Light
Imagina que o teu componente tem uma variável modoEscuro = true. Como aplicarias uma classe .dark-theme ao container principal usando a sintaxe de objeto do [ngClass]?
Desafio 3: Prioridades
O que acontece se um elemento tiver uma classe fixa class="btn" e uma diretiva [class.btn]="false" ao mesmo tempo?