Classes e estilos dinâmicos
Vincule classes e estilos de forma reativa.
Classes e estilos dinâmicos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Estilização dinâmica em modelos
O Angular permite vincular classes e estilos inline ao estado do componente, para que a interface seja atualizada automaticamente conforme os dados mudam.
Vinculação de uma única classe
Use [class.name] para alternar uma classe CSS com base em uma expressão booleana.
<div [class.active]="isActive">Item</div>
// component
isActive = true;Várias classes com ngClass
ngClass aplica várias classes ao mesmo tempo, usando um objeto com nomes de classes associados a valores booleanos.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass com matrizes e strings
ngClass também aceita uma string de nomes de classes ou uma matriz.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Vinculação de um único estilo
Use [style.property] para vincular uma propriedade CSS inline a um valor.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Vinculações de estilo com unidades
Acrescente um sufixo de unidade para vincular valores numéricos a unidades como pixels ou porcentagem.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;Vários estilos com ngStyle
ngStyle define vários estilos inline ao mesmo tempo a partir de um objeto.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>A vinculação de classe prevalece em caso de conflito
Quando classes estáticas e vinculadas se sobrepõem, o Angular as combina; a vinculação controla se a classe dinâmica está presente, sem remover as classes estáticas.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Reagindo ao estado
As vinculações são reavaliadas durante a detecção de alterações, portanto, atualizar uma propriedade do componente estiliza o elemento novamente de imediato.
toggle() {
this.isActive = !this.isActive;
}Escolhendo entre classe e estilo
Prefira vinculações de classe com regras CSS para facilitar a manutenção; reserve as vinculações diretas de estilo para valores realmente dinâmicos, como uma largura ou cor calculada.
Com signals
As vinculações de classe e estilo também funcionam com signals; basta chamar a signal na expressão do modelo.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Verificação rápida
Teste sua compreensão de classes e estilos dinâmicos.
Recapitulação
Alterne uma classe com [class.name] ou várias com ngClass; defina um estilo com [style.prop] (com unidade opcional) ou vários com ngStyle. As vinculações reagem automaticamente ao estado, incluindo signals.
Perguntas Frequentes
A aula “Classes e estilos dinâmicos” é grátis?
Sim — o texto completo de “Classes e estilos dinâmicos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Classes e estilos dinâmicos”?
Vincule classes e estilos de forma reativa. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Classes e estilos dinâmicos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estilos com escopo de componente
- Modos de encapsulamento da visualização
- Estilização do host e do contexto do host
- Classes e estilos dinâmicos