🚀 Capítulo 09: Pipes e Transformação de Dados

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de usar os Pipes do Angular para transformar e formatar a maneira como os dados são exibidos na tela (como transformar textos em maiúsculo, formatar moedas e datas) sem alterar o valor real da variável no código.

---

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

Os dados brutos que vêm do computador de bordo às vezes são difíceis de ler. Seu desafio hoje é formatar a Data Estelar da missão e converter os nomes dos planetas para letras maiúsculas para que fiquem bem visíveis no painel de controle!

---

🧠 Fundamentos: A Teoria Traduzida

Pipes (canos) são operadores que você usa dentro do HTML para “filtrar” ou transformar um dado antes dele aparecer na tela. O símbolo do pipe é a barra vertical |.

Principais Pipes Nativos do Angular:

• uppercase: Transforma todo o texto em MAIÚSCULO.

• lowercase: Transforma todo o texto em minúsculo.

• date: Formata datas de um jeito bonito.

• currency: Formata números como dinheiro (moeda).

• Sintaxe: {{ valor | nomeDoPipe }}

• Exemplo: {{ 'luke' | uppercase }} vira “LUKE”.

---

📖 Exemplo Guiado: Formatando o Painel

Vamos aplicar pipes no nosso painel de controle.

🛠️ Passo a Passo (TypeScript)

Abra src/app/painel-controle/painel-controle.component.ts e adicione os dados:

export class PainelControleComponent {
  planetaAtual: string = 'coruscant';
  dataEstelar: Date = new Date(); // Pega a data e hora de hoje
  creditosGalacticos: number = 1500.50;
}

🛠️ Passo a Passo (HTML)

Abra src/app/painel-controle/painel-controle.component.html e use os pipes:

<div class="painel">
  <!-- Uppercase Pipe -->
  <p>Destino Atual: **{{ planetaAtual | uppercase }}**</p>
 
  <!-- Date Pipe -->
  <p>Data da Missão: **{{ dataEstelar | date:'dd/MM/yyyy' }}**</p>
 
  <!-- Currency Pipe -->
  <p>Fundos da Aliança: **{{ creditosGalacticos | currency:'BRL':'symbol':'1.2-2' }}**</p>
</div>

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e veja o navegador.
2. O nome do planeta aparecerá em maiúsculo (“CORUSCANT”).
3. A data aparecerá formatada no padrão brasileiro (dia/mês/ano).
4. O valor em créditos aparecerá com o símbolo da moeda (R$).

---

🛠️ Prática Obrigatória 1

Use o pipe currency para exibir o valor 4500 formatado como Dólar Americano (USD). O resultado deve mostrar o símbolo $.

---

🛠️ Prática Obrigatória 2

Exiba a variável dataEstelar usando o formato de hora. Pesquise como usar o parâmetro 'shortTime' no pipe date para exibir apenas as horas e minutos.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

<p>Preço da Nave: {{ 4500 | currency:'USD':'symbol' }}</p>

Prática 2:

<p>Hora do Salto: {{ dataEstelar | date:'shortTime' }}</p>

---

← Capitulo Anterior | Proximo Capitulo →