Módulo 8: Pipes (Transformação de Dados)
2. Resumo da Aula Anterior
No Módulo 7, desvendámos o Ciclo de Vida dos componentes e aprendemos a usar o ngOnInit e o ngOnDestroy. Agora, vamos aprender a apresentar os dados de forma bonita e profissional ao utilizador, sem alterar o valor original das variáveis.
3. O Que Vais Aprender Hoje
- ✅ O que são Pipes e o símbolo
|. - ✅ Pipes integrados: Date, Currency e Uppercase.
- ✅ Como passar parâmetros para os Pipes.
- ✅ O Pipe Async (Introdução rápida).
4. Teoria: O Filtro de Água
Conceito: Um Pipe (literalmente "Cano") pega num dado bruto (como um número feio) e "passa-o" por um filtro antes de o mostrar no ecrã. O dado original no TypeScript não muda, apenas a forma como ele é visto pelo utilizador.
🎭 Analogia: O Filtro do Instagram
Imagina que tiras uma foto (o teu dado bruto):
- O Dado Bruto: É a foto original guardada no teu telemóvel.
- O Pipe | : É o menu de filtros.
- A Transformação: Tu aplicas o filtro "Preto e Branco". No ecrã a foto parece artística, mas o ficheiro original continua a cores na tua galeria.
5. Exemplos Práticos
Exemplo 1: Texto e Letras
Transformar maiúsculas e minúsculas.
{{ "sandro" | uppercase }}
{{ "APRENDENDO ANGULAR" | lowercase }}
{{ "aprende web" | titlecase }}
Exemplo 2: Dinheiro e Números
Formatar moedas automaticamente.
// No .ts
preco = 59.90;
Total: {{ preco | currency:'EUR' }}
Nota: {{ 1.234 | number:'1.1-1' }}
Exemplo 3: Datas Profissionais
Transformar objetos Date em texto legível.
// No .ts
hoje = new Date();
Data: {{ hoje | date:'dd/MM/yyyy' }}
Hora: {{ hoje | date:'HH:mm' }}
6. Agora é a Tua Vez!
Vamos criar o "Mostrador de Preços de Viagem":
- Cria uma variável
dataPartida = new Date(). - Cria uma variável
valorBilhete = 1250.50. - No HTML, mostra o valor do bilhete usando o pipe
currencypara Dólares ('USD'). - Mostra a data de partida no formato "Quinta-feira, 18 de Dezembro" (Usa o pipe
datecom parâmetros). - Pega no nome do destino (ex: "Paris") e faz com que apareça sempre em MAIÚSCULAS.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Pipes** transformam a aparência dos dados no template.
- 📌 O símbolo chave é a barra vertical **|**.
- 📌 Podes passar parâmetros usando os dois pontos **:** (ex: `date:'format'`).
- 📌 Podes encadear vários pipes:
{{ data | date | uppercase }}. - 📌 O dado original na classe TypeScript permanece intocado.
9. Desafios Práticos
Desafio 1: Corrente de Pipes
Consegues aplicar dois pipes ao mesmo tempo? Como farias para mostrar uma data e garantir que o nome do mês aparece todo em maiúsculas?
Desafio 2: O Pipe de Json
Descobre para que serve o pipe json integrado no Angular. Em que situação é que ele salva a vida de um programador durante o desenvolvimento?
Desafio 3: Percentagem Express
Se tiveres o valor 0.85 e quiseres que apareça 85% no ecrã, qual é o nome do pipe que devias usar?