Pular para conteúdo

Quiz: Aula 04 ❓

Teste seus conhecimentos sobre o uso de diretivas estruturais e de atributo.

  1. Qual caractere identifica uma Diretiva Estrutural?

    • ( ) @
    • ( ) #
    • (x) *
    • ( ) &
    • Explicação: Diretivas estruturais levam o asterisco (ex: *ngIf).

  2. Para que serve o *ngIf?

    • ( ) Para criar loops de dados
    • (x) Para exibir ou remover elementos do DOM condicionalmente
    • ( ) Para mudar a cor do texto
    • ( ) Para importar módulos
    • Explicação: O *ngIf adiciona ou remove elementos baseado em uma expressão booleana.

  3. Qual diretiva é usada para iterar sobre uma lista de objetos?

    • ( ) *ngShow
    • ( ) *ngLoop
    • (x) *ngFor
    • ( ) *ngList
    • Explicação: O *ngFor é a diretiva oficial para repetição de elementos.

  4. Qual a principal diferença entre Diretiva Estrutural e de Atributo?

    • ( ) Uma é para mobile, outra para desktop
    • (x) A estrutural altera o DOM (adiciona/remove), a de atributo altera aparência/comportamento
    • ( ) A de atributo usa asterisco
    • ( ) Não há diferença, são sinônimos
    • Explicação: Diretivas estruturais mudam o layout (estrutura), as de atributo mudam o elemento existente.

  5. Como escrevemos a sintaxe básica de um *ngFor de uma lista de nomes?

    • ( ) *ngFor="nome in nomes"
    • ( ) *ngFor="let nomes of nome"
    • (x) *ngFor="let nome of nomes"
    • ( ) *ngFor="for nome of nomes"
    • Explicação: A sintaxe let item of lista é a padrão do Angular.

  6. A diretiva ngClass espera qual tipo de dado geralmente?

    • ( ) Apenas uma string
    • (x) Um objeto ou um array de classes
    • ( ) Um número inteiro
    • ( ) Uma URL
    • Explicação: Geralmente passamos um objeto { 'classe': condicao }.

  7. É possível usar *ngIf e *ngFor no MESMO elemento HTML?

    • ( ) Sim, é a prática recomendada
    • (x) Não, o Angular não permite duas diretivas estruturais no mesmo elemento
    • ( ) Sim, mas apenas se o *ngIf vier primeiro
    • ( ) Sim, mas apenas em tags <div>
    • Explicação: O Angular proíbe múltiplas diretivas estruturais em um só elemento para evitar conflitos de renderização.

  8. Qual diretiva usaríamos para mudar a cor de fundo de um botão baseado em um valor variável?

    • ( ) ngClass apenas
    • ( ) *ngIf
    • (x) ngStyle ou ngClass
    • ( ) ngModel
    • Explicação: Ambas podem ser usadas, mas ngStyle é ideal para valores CSS diretos.

  9. O que acontece se a condição do *ngIf for falsa?

    • ( ) O elemento fica invisível (display: none)
    • (x) O elemento é completamente removido da árvore do DOM
    • ( ) O texto do elemento é deletado
    • ( ) O navegador emite um erro
    • Explicação: O Angular remove fisicamente o elemento do código HTML renderizado.

  10. Para criar uma diretiva personalizada pelo CLI, qual o comando?

    • ( ) ng g c minha-diretiva
    • ( ) ng g s minha-diretiva
    • (x) ng g d minha-diretiva
    • ( ) ng new minha-diretiva
    • Explicação: ng g d é o atalho para ng generate directive.