Pular para conteúdo

Exercícios: Aula 03 📝

Pratique a comunicação entre lógica e visual.

Básico

  1. Interpolação: Crie uma variável titulo no seu componente e exiba-a no HTML usando a sintaxe correta.
  2. Property Binding: Como você alteria dinamicamente a cor de fundo de uma div usando Property Binding com a propriedade style.background-color?

Intermediário

  1. Event Binding: Crie uma função que exiba no console do navegador o que o usuário está digitando em um campo <input>. (Dica: use o evento (input) ou (keyup)).
  2. Two-way Binding: Explique por que o [(ngModel)] é chamado de "Banana in a Box". Qual módulo deve ser importado para que ele funcione?

Desafio

5. Calculadora Simples: Crie dois campos de input (numéricos) e exiba a soma desses dois valores em tempo real na tela, conforme o usuário digita. Use Two-way binding.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Interpolação **Resolução e Implementação:**
// Estrutura de implementação recomendada para Interpolação
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Data Binding**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Property Binding **Resposta Comentada:** - **Fundamentação:** No contexto de **Data Binding**, o conceito abordado (Property Binding) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Event Binding **Resolução e Implementação:**
// Estrutura de implementação recomendada para Event Binding
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Data Binding**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Two-way Binding **Resposta Comentada:** - **Fundamentação:** No contexto de **Data Binding**, o conceito abordado (Two-way Binding) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Calculadora Simples **Resolução e Implementação:**
// Estrutura de implementação recomendada para Calculadora Simples
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Data Binding**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.