🚀 Capítulo 06: Diretivas de Atributo

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de alterar a aparência e o estilo dos elementos do seu HTML dinamicamente usando as diretivas de atributo do Angular: ngClass e ngStyle.

---

🏢 O Cenário Prático (Seu Desafio)

O painel da sua nave precisa mudar de cor visualmente para alertar o piloto! Se os sistemas estiverem seguros, o painel deve ter uma borda verde. Se estiver em modo de combate, a borda deve ficar vermelha piscante. Vamos usar CSS dinâmico para resolver isso!

---

🧠 Fundamentos: A Teoria Traduzida

Diferente das diretivas estruturais (que colocam ou tiram coisas da tela), as diretivas de atributo apenas mudam a aparência ou o comportamento de um elemento que já existe.

1. ngStyle (Estilo Inline Dinâmico)

Serve para aplicar estilos CSS diretamente na tag baseado em variáveis do TypeScript.

• Sintaxe: [ngStyle]="{'propriedade-css': valor}"
• Exemplo: [ngStyle]="{'color': energia < 20 ? 'red' : 'green'}"

2. ngClass (Classes CSS Dinâmicas)

Serve para adicionar ou remover classes CSS inteiras baseado em uma condição. É muito melhor que o ngStyle quando você tem muitos estilos para mudar de uma vez.

• Sintaxe: [ngClass]="{'nome-da-classe': condicao}"
• Exemplo: [ngClass]="{'alerta-ativo': emCombate}" (A classe alerta-ativo só será aplicada se emCombate for true).

---

📖 Exemplo Guiado: Mudando a Cor do Painel

Vamos criar classes CSS e alterná-las.

🛠️ Passo a Passo (CSS)

Abra src/app/painel-controle/painel-controle.component.css e adicione as classes:

.painel-padrao {
  border: 2px solid gray;
  padding: 10px;
}
 
.modo-perigo {
  border: 2px solid red;
  background-color: #ffcccc;
}

🛠️ Passo a Passo (TypeScript)

Abra src/app/painel-controle/painel-controle.component.ts:

export class PainelControleComponent {
  emCombate: boolean = false;
}

🛠️ Passo a Passo (HTML)

Abra src/app/painel-controle/painel-controle.component.html:

<!-- Aplicando a classe painel-padrao sempre, e a modo-perigo se emCombate for true -->
<div class="painel-padrao" [ngClass]="{'modo-perigo': emCombate}">
  <h2>Status da Nave</h2>
  <button (click)="emCombate = !emCombate">
    Alternar Modo de Combate
  </button>
</div>

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e clique no botão no navegador.
2. Veja a borda e o fundo da caixa mudarem de cor instantaneamente ao clicar!

---

🛠️ Prática Obrigatória 1

Use o ngStyle para fazer com que a barra de energia mude de tamanho. No HTML, crie uma div simulando uma barra. Use [ngStyle]="{'width': nivelEnergia + '%'}" para que a largura da barra mude se você alterar a variável nivelEnergia (como fizemos na aula passada).

---

🛠️ Prática Obrigatória 2

Crie uma classe CSS chamada .texto-suave com uma cor cinza. Use o ngClass para aplicar essa classe em um texto se a variável modoSilencioso for true.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .html:

<div style="background-color: gray; width: 200px;">
  <!-- Barra interna que cresce -->
  <div [ngStyle]="{'width': nivelEnergia + '%', 'background-color': 'blue'}">
    Energia
  </div>
</div>

Prática 2:

No .css:

.texto-suave {
  color: #888;
  font-style: italic;
}

No .html:

<p [ngClass]="{'texto-suave': modoSilencioso}">
  Este é um sistema de comunicação discreto.
</p>

---

← Capitulo Anterior | Proximo Capitulo →