Módulo 2: Templates e Interpolation (Dados)
2. Resumo da Aula Anterior
No Módulo 1, aprendemos a criar componentes usando o Angular CLI. Agora que já temos a nossa "peça de Lego", vamos aprender a fazer com que ela mostre informações dinâmicas que mudam de acordo com a nossa lógica.
3. O Que Vais Aprender Hoje
- ✅ O segredo das chavetas duplas {{ }}.
- ✅ Ligar variáveis do TypeScript ao HTML.
- ✅ Expressões e cálculos dentro do Template.
- ✅ Chamar funções diretamente no ecrã.
4. Teoria: A Janela Mágica
Conceito: A Interpolação é a forma mais simples de comunicação no Angular: ela flui do **Código (TS)** para a **Visão (HTML)**. É como se o HTML tivesse "buracos" onde o TypeScript injeta os dados em tempo real.
🖼️ Analogia: A Moldura de Foto Digital
Imagina uma moldura digital na tua sala:
- O TypeScript: É a pen drive guardada atrás da moldura. Lá estão os ficheiros das fotos (os dados).
- O HTML: É o vidro da moldura onde a luz é projetada.
- A Interpolação {{ }}: É o projetor. Se mudares o ficheiro na pen drive, a imagem no vidro muda automaticamente sem tu teres de tocar na moldura.
5. Exemplos Práticos
Exemplo 1: Texto e Variáveis
Mostrar um nome no ecrã.
// No seu .ts
export class PerfilComponent {
nomeUser = "André Silva";
cargo = "Desenvolvedor Backend";
}
Perfil de {{ nomeUser }}
Trabalha como: {{ cargo }}
Exemplo 2: Matemática e Expressões
O Angular resolve contas básicas por ti.
O resultado é {{ 2 + 2 }}
Olá {{ nomeUser.toUpperCase() }}
Exemplo 3: Chamar Métodos
Executar lógica e mostrar o retorno.
// No seu .ts
getSaudacao() {
return "Bem-vindo ao sistema de elite!";
}
6. Agora é a Tua Vez!
Vamos criar o "Painel do Aluno":
- No teu TS, cria 3 variáveis:
nomeAluno,nota1enota2(números). - No teu HTML, mostra o nome do aluno dentro de um
<h2>. - Cria um parágrafo que mostra a média das duas notas usando a interpolação:
{{ (nota1 + nota2) / 2 }}. - Bónus: Cria uma função
getStatus()que devolve "Aprovado" ou "Reprovado" e mostra o resultado no fundo do painel.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Interpolation** usa chavetas duplas `{{ }}`.
- 📌 Serve para levar dados do **TypeScript** para o **HTML**.
- 📌 Podes usar propriedades, expressões matemáticas e métodos.
- 📌 Se o valor da variável no TS mudar, o Angular atualiza o HTML **instantanemente**.
9. Desafios Práticos
Desafio 1: O Objeto Misterioso
Se tiveres user = { id: 1, login: "admin" } no seu TS, como mostrarias apenas o login no HTML?
Desafio 2: Imagem Dinâmica
Podes usar interpolação dentro do SRC de uma imagem? Por exemplo src="assets/{{ fotoUser }}"? Qual a vantagem disso?
Desafio 3: Concatenação Express
Sem usar variáveis extra no TS, mostra a frase "O utilizador [nome] tem [idade] anos" inteiramente dentro de uma única tag <p> usando interpolação.