Pular para conteúdo

Exercícios: Aula 04 📝

Pratique a manipulação do DOM com diretivas.

Básico

  1. ngIf: Crie um botão "Exibir Detalhes". Ao clicar, um parágrafo de texto deve aparecer ou desaparecer da tela usando *ngIf.
  2. ngFor: Crie um array de strings chamado habilidades. Use o *ngFor para listar essas habilidades em uma lista não ordenada (<ul>).

Intermediário

  1. ngClass: Crie uma variável importante (boolean). Use a diretiva ngClass para aplicar a classe CSS .texto-vermelho a um elemento apenas quando importante for verdadeiro.
  2. ngStyle: Crie um controle de "Tamanho do Texto" (um input range). Use ngStyle para que o tamanho da fonte de um parágrafo mude conforme o valor do input.

Desafio

5. Filtro Simples: Crie uma lista de números de 1 a 10. Use o *ngFor para exibir os números, mas adicione um *ngIf interno (em um container ou elemento) para que apenas os números pares sejam mostrados na lista final.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: ngIf **Resolução e Implementação:** 
// Estrutura de implementação recomendada para ngIf
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Diretivas Estruturais e de Atributo ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: ngFor **Resolução e Implementação:** 
// Estrutura de implementação recomendada para ngFor
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Diretivas Estruturais e de Atributo ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: ngClass **Resolução e Implementação:** 
// Estrutura de implementação recomendada para ngClass
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Diretivas Estruturais e de Atributo ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: ngStyle **Resolução e Implementação:** 
// Estrutura de implementação recomendada para ngStyle
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Diretivas Estruturais e de Atributo ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Filtro Simples **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Filtro Simples
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Diretivas Estruturais e de Atributo ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.