🚀 Capítulo 03: Interpolation e Property Binding

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de enviar dados do seu arquivo TypeScript (lógica) diretamente para a sua tela (HTML) usando duas técnicas fundamentais do Angular: Interpolation e Property Binding.

---

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

Um bom piloto precisa ver as informações da nave em tempo real. Seu desafio hoje é exibir o nome do piloto e o nível de energia dos motores no painel, puxando esses dados direto do “computador de bordo” (arquivo TypeScript)!

---

🧠 Fundamentos: A Teoria Traduzida

O Angular facilita a comunicação entre o arquivo .ts (onde ficam as variáveis) e o arquivo .html (onde as coisas aparecem).

1. Interpolation (Interpolação) {{ }}

Serve para “colar” o valor de uma variável diretamente no meio do texto do seu HTML.

• Sintaxe: {{ nomeDaVariavel }}
• Exemplo: Se no .ts você tem nome = 'Luke', no HTML <h1>Olá, {{ nome }}</h1> vai aparecer como “Olá, Luke”.

2. Property Binding [ ]

Serve para controlar as propriedades de uma tag HTML (como o src de uma imagem ou o disabled de um botão) usando uma variável.

• Sintaxe: [propriedade]="variavel"
• Exemplo: <button [disabled]="bloqueado">Atirar</button>

---

📖 Exemplo Guiado: Exibindo o Nome do Piloto

Vamos atualizar o componente do painel de controle que criamos na aula passada.

🛠️ Passo a Passo

1. Abra o arquivo src/app/painel-controle/painel-controle.component.ts.
2. Dentro da classe, crie a variável nomePiloto:

export class UserProfileComponent { // Nome pode variar se você usou a CLI
  nomePiloto: string = 'Luke Skywalker';
}

3. Abra o arquivo src/app/painel-controle/painel-controle.component.html e use a interpolação:

<div class="painel">
  <h2>🎛️ Painel de Controle</h2>
  <p>Piloto Atual: **{{ nomePiloto }}**</p>
</div>

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos.
2. Se o ng serve já estiver rodando, o navegador atualizará sozinho. Se não, execute ng serve.
3. Veja o nome do Luke aparecer na tela!

---

🛠️ Prática Obrigatória 1

No mesmo arquivo .ts, crie uma variável chamada nivelEnergia do tipo número e atribua o valor 85. Exiba essa informação no HTML logo abaixo do nome do piloto usando Interpolação.

---

🛠️ Prática Obrigatória 2

Crie uma variável booleana chamada hiperdrivePronto e defina como false. No HTML, crie um botão com o texto “Saltar para o Hiperespaço”. Use o Property Binding para deixar o botão desabilitado ([disabled]) baseado no valor da variável hiperdrivePronto.

---

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 03) e clique em Commit to main.
2. Envie para a Nuvem (Push): Clique em Push origin.
3. No Microsoft Teams: Entregue o link do repositório na tarefa correspondente.

---

💡 Checkpoint de Lógica

Se você mudar o valor de hiperdrivePronto para true no arquivo TypeScript, o Angular automaticamente habilitará o botão na tela sem que você precise mexer no HTML! Essa é a magia do Data Binding.

---

🔥 Desafio de Fixação (Opcional)

Pesquise como usar o Property Binding para trocar a cor de fundo de uma div usando a propriedade [style.background-color].

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .ts:

nivelEnergia: number = 85;

No .html:

<p>Nível de Energia: {{ nivelEnergia }}%</p>

Prática 2:

No .ts:

hiperdrivePronto: boolean = false;

No .html:

<button [disabled]="!hiperdrivePronto">Saltar para o Hiperespaço</button>

(Nota: O ! inverte o valor. Se está pronto (true), desabilitado fica false).

---

← Capitulo Anterior | Proximo Capitulo →