Pular para conteúdo

Aula 14: Estilização Moderna e Componentes de UI 🎨

Nesta aula, vamos aprender como deixar nossa aplicação Angular bonita, profissional e responsiva, explorando o CSS isolado e as bibliotecas de componentes.

👗 Estilização Isolada (View Encapsulation)

Por padrão, o CSS que você escreve em um componente não vaza para o resto da aplicação. O Angular adiciona atributos únicos ao HTML para garantir esse isolamento.

Tipos de Encapsulamento

  • Emulated (Padrão): Simula o isolamento via atributos.
  • None: O CSS se torna global.
  • ShadowDom: Usa a tecnologia nativa do browser para isolamento total.

📦 Bibliotecas de Componentes

Não precisamos reinventar a roda. Podemos usar bibliotecas que já trazem botões, modais e tabelas prontas.

  1. Angular Material: A biblioteca oficial seguindo o Material Design.
  2. PrimeNG: Uma das mais completas, com centenas de componentes.
  3. Tailwind CSS: Uma abordagem baseada em classes utilitárias que está dominando o mercado.

🛠️ Instalando Angular Material

# Adicionando o Material ao projeto
$ ng add @angular/material

Após instalado, basta importar os módulos (ou diretivas standalone) que deseja usar:

import { MatButtonModule } from '@angular/material/button';

@Component({
  standalone: true,
  imports: [MatButtonModule],
  template: `<button mat-raised-button color="primary">Click</button>`
})

🌓 Variáveis CSS e Temas

Use variáveis CSS (--cor-primaria) para facilitar a criação de temas (Light/Dark Mode).

:root {
  --primary-color: #3f51b5;
}

.meu-card {
  background-color: var(--primary-color);
}

🌟 Animações no Angular

O Angular possui um módulo potente para animações de transição de estados.

graph LR
    A[Estado: Inicial] --> |Transição| B[Estado: Final]
    B --> |Trigger| C[Animação na Tela]

🚀 Prática: Interface Premium

Vamos transformar nossa listagem de produtos simples em uma vitrine de luxo: 1. Instale o Angular Material. 2. Use o MatCard para exibir os itens. 3. Adicione um MatToolbar como cabeçalho. 4. Implemente um botão que abre um MatDialog (modal) para ver mais detalhes.

🏁 Mini-Projeto da Aula

Crie uma página de perfil de usuário "Dark Mode" usando apenas variáveis CSS. O usuário deve conseguir alternar entre o tema claro e escuro clicando em um botão que altera uma classe no body da aplicação.