Aula 14: Estilização Moderna 🎨
Criando Interfaces Premium no Angular
👗 Estilo Isolado
O CSS do seu componente não "vaza" para os outros.
O Angular usa o View Encapsulation (Emulated) por padrão.
🏛️ Bibliotecas de UI
Não reinvente a roda!
- Angular Material: Oficial (Design do Google)
- PrimeNG: Gigante (Muitos componentes)
- Tailwind CSS: Agilidade via utilitários
🛠️ ng add
A forma mágica de instalar grandes bibliotecas.
Já configura temas, fontes e ícones automaticamente!
🌓 Temas Dinâmicos
Use Variáveis CSS para trocar entre Light e Dark Mode.
🏗️ Seletores Especiais
:host: Estiliza a tag do componente.::ng-deep: Cruza a barreira do isolamento (use com cuidado!).
🎭 Animações
O Angular tem um motor de animações nativo.
Transições suaves entre estados de dados enriquecem a UX.
🎯 Prática de Hoje
Vamos aplicar o Angular Material para criar uma "Dashboard" com tabelas e cards interativos!