Pular para o conteúdo principal

Questão de Programação — Frameworks em Programação — FUNDATEC 2023

ProgramaçãoFrameworks em Programação
Código
qq897124
Banca
FUNDATEC
Órgão
PROCERGS
Ano
2023
Nível
Superior
Cargo
ANC - Analista em Computação - Ênfase em Desenvolvimento Front-End
Tendo em vista as estruturas de template do Angular e suas definições, relacione a Coluna 1 à Coluna 2.Coluna 11. interpolation2. property binding3. event binding4. class and style binding5. template variablesColuna 2 ( ) <input #campo type="text"><button (click)="salvar(campo.value)">Salvar</button> ( ) <h1>{{ titulo }}</h1> ( ) <img [src]="imagemUrl"> ( ) <div [class.ativo]="isAtivo" [style.backgroundColor]="cor"></div> ( ) <button (click)="botaoClicado()">Clique aqui</button> A ordem correta de preenchimento dos parênteses, de cima para baixo, é:
  1. A1 – 2 – 3 – 5 – 4.
  2. B5 – 1 – 2 – 4 – 3.
  3. C5 – 4 – 1 – 3 – 2.
  4. D4 – 2 – 5 – 3 – 1.
  5. E3 – 5 – 4 – 2 – 1.
Revelar gabarito e comentário

GabaritoB — 5 – 1 – 2 – 4 – 3.

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

Estruturas de template do Angular

Gabarito: letra B (5 – 1 – 2 – 4 – 3). A questão cobra a identificação de cada sintaxe Angular usada nos templates das views. A sequência correta relaciona cada código da Coluna 2 ao conceito da Coluna 1, conforme explicado a seguir.

Análise dos itens:

  • 1. interpolation → {{ titulo }}: expressão entre chaves duplas que exibe o valor de uma propriedade do componente. ✅

  • 2. property binding → [src]="imagemUrl": colchetes indicam ligação de propriedade do elemento HTML a uma propriedade do componente. ✅

  • 3. event binding → (click)="botaoClicado()": parênteses associam um evento do elemento a um método do componente. ✅

  • 4. class and style binding → [class.ativo]="isAtivo" [style.backgroundColor]="cor": bindings específicos para classes CSS e estilos inline. ✅

  • 5. template variables → #campo: a cerquilha (#) cria uma referência ao elemento, permitindo acessá-lo no template. ✅

Agora, confrontando com os códigos da Coluna 2 (na ordem apresentada):

  1. <input #campo ...><button (click)="salvar(campo.value)"> → destaca o uso de template variable (#campo), portanto 5.

  2. <h1>{{ titulo }}</h1> → interpolation → 1.

  3. `` → property binding → 2.

  4. <div [class.ativo]="isAtivo" [style.backgroundColor]="cor"> → class and style binding → 4.

  5. <button (click)="botaoClicado()"> → event binding → 3.

Sequência: 5 – 1 – 2 – 4 – 3 (alternativa B).

PEGA ESSA DICA!

Associe visualmente: {{ }} → interpolação; [ ] → property; ( ) → event; [class.] [style.] → class/style; # → template variable. Esse padrão é recorrente em provas sobre Angular.

Gabarito: letra B.

Link permanente: /questoes/qq897124