Pular para conteúdo

Quiz: Aula 14 ❓

Teste seus conhecimentos sobre estilização e design no Angular.

  1. Qual o tipo de encapsulamento de CSS padrão do Angular?

    • ( ) None
    • ( ) ShadowDom
    • (x) Emulated
    • ( ) Static
    • Explicação: O Emulated simula o isolamento sem precisar do Shadow DOM nativo, funcionando em todos os browsers.

  2. Onde ficam os estilos que devem valer para TODO o site?

    • ( ) No arquivo .css do componente
    • (x) No arquivo styles.css (ou .scss) na raiz da pasta src
    • ( ) No index.html apenas
    • ( ) No main.ts
    • Explicação: O styles.css é o ponto central para regras de design globais.

  3. Para que serve o comando ng add?

    • ( ) Para rodar o servidor
    • ( ) Para deletar o projeto
    • (x) Para instalar bibliotecas e configurá-las automaticamente no projeto
    • ( ) Para criar um novo arquivo
    • Explicação: Ele facilita muito a instalação de pacotes complexos como o Angular Material.

  4. Angular Material é baseado em qual sistema de design?

    • ( ) Bootstrap
    • ( ) Ant Design
    • (x) Material Design (do Google)
    • ( ) Fluent Design
    • Explicação: Segue as diretrizes estéticas e funcionais do Google.

  5. O que o seletor :host faz no CSS do componente?

    • ( ) Estiliza todos os botões do site
    • (x) Aplica estilos diretamente na tag do componente (ex: no <app-header>)
    • ( ) Estiliza os componentes filhos
    • ( ) Esconde o componente
    • Explicação: :host é o seletor para o próprio elemento "hospedeiro" do componente.

  6. Como aplicar uma classe global a um elemento dentro de um componente se o encapsulamento for Emulated?

    • ( ) O Angular não permite
    • ( ) Usando a flag !important
    • (x) Usando o seletor especial ::ng-deep (embora deva ser usado com cautela)
    • ( ) Colocando o CSS no package.json
    • Explicação: ::ng-deep permite que o estilo "atravesse" o isolamento.

  7. Qual a vantagem de usar Variáveis CSS?

    • ( ) O site fica mais leve
    • (x) Facilita a manutenção de cores e a criação de temas dinâmicos
    • ( ) Evita que o site quebre no Safari
    • ( ) Diminui o número de componentes
    • Explicação: Alterar uma cor em um único lugar reflete em toda a aplicação.

  8. O que é o PrimeNG?

    • ( ) Um servidor de banco de dados
    • ( ) Um curso de Angular
    • (x) Uma biblioteca rica de componentes de UI para Angular
    • ( ) Uma linguagem de programação
    • Explicação: É uma das alternativas mais populares ao Angular Material.

  9. Para usar animações no Angular, precisamos de qual módulo?

    • ( ) HttpClientModule
    • (x) BrowserAnimationsModule (ou provideAnimations)
    • ( ) FormsModule
    • ( ) RouterModule
    • Explicação: O motor de animações é um módulo separado para não pesar em apps simples.

  10. Tailwind CSS no Angular requer instalação via:

    • ( ) Apenas ng add
    • (x) NPM e configuração do arquivo tailwind.config.js
    • ( ) Download manual de arquivos .zip
    • ( ) Tag <script> no index.html
    • Explicação: Como é um framework CSS externo, requer uma configuração de build.