No Angular, as diretivas de atributo desempenham um papel fundamental ao alterar dinamicamente o comportamento e a aparência dos elementos sem modificar a estrutura do DOM. Duas das diretivas de atributo mais utilizadas são ngClass e ngStyle. Essas diretivas oferecem maneiras flexíveis de controlar estilos de elementos e classes CSS com base no estado do componente.

O que é ngClass?

Isso é especialmente útil quando se deseja alterar a aparência de um elemento em resposta a mudanças nos dados — por exemplo, destacando um item ativo ou aplicando estilos com base no status.

O ngClass suporta sintaxe de objeto, arrays de strings e funções que retornam esses formatos para aplicar classes dinamicamente.

Sintaxe de Objeto

Utilize um objeto onde as chaves são nomes de classes e os valores são condições booleanas. Se a condição for true, a classe é aplicada.

Neste exemplo, classes são adicionadas ou removidas com base no valor da propriedade isActive no componente.

Se isActive for true, a classe active é adicionada e inactive é removida. Se isActive for false, ocorre o contrário.

Array de Strings

Utilize um array onde cada string representa um nome de classe CSS que será adicionado ao elemento. Esta abordagem é útil quando se deseja aplicar várias classes dinamicamente sem condições.

Aqui, as classes listadas no array são aplicadas ao elemento.

Utilizar um array é útil quando se deseja atribuir várias classes de forma dinâmica — especialmente quando a quantidade de classes pode variar.

Função

Utilize uma função que retorne qualquer um dos formatos suportados: um objeto, um array de strings ou uma string única. Isso é útil quando as classes aplicadas dependem de lógica mais complexa ou condições dinâmicas.

ngClass também pode aceitar uma função que retorna um objeto, array ou string, dependendo da lógica definida.

Neste caso, o método getClass() retorna um objeto com nomes de classes CSS como chaves e condições booleanas como valores.

• Se isError for true, a classe error-class será aplicada;
• Se isSuccess for true, a classe success-class será aplicada;
• Se ambos forem false, nenhuma classe será adicionada.

O que é ngStyle?

Com o ngStyle, é possível alterar propriedades como cor de fundo, fonte, tamanho, posicionamento e muito mais — tudo diretamente a partir do componente.

Como o ngStyle Funciona?

O ngStyle aceita um objeto onde as chaves são nomes de propriedades CSS e os valores são expressões avaliadas durante a renderização.

Se uma expressão retorna um valor, esse valor é aplicado à propriedade CSS correspondente do elemento.

Exemplo com um Objeto de Estilo

Neste exemplo, alteramos dinamicamente a cor do texto e o tamanho da fonte do elemento:

Se textColor for red e fontSize for 20px, esses estilos serão aplicados ao elemento. Essa abordagem permite combinar facilmente vários estilos em uma única expressão para maior flexibilidade.

Exemplo usando uma variável e expressão

Se for necessário aplicar estilos com base em lógica, é possível utilizar expressões diretamente no template:

Se isActive for true, a cor de fundo será verde; se for false, será vermelha. Aqui, um operador ternário é utilizado para tornar a lógica concisa e expressiva.

Exemplo com um Valor Dinâmico

Expressões em ngStyle também podem ser baseadas em métodos. É possível utilizar métodos do componente para calcular valores de estilo dinamicamente:

Neste exemplo, o método getDynamicStyle() retorna um objeto de estilo com base no valor atual de isDarkMode.

Isso é especialmente útil quando os estilos dependem de condições externas, como preferências do usuário, horário do dia ou temas do aplicativo.

Quando Usar ngClass vs ngStyle?

• Utilize ngClass ao trabalhar com classes CSS predefinidas. Esta abordagem é ideal quando estilos são reutilizados em vários locais e você deseja um controle centralizado dos estilos por meio da folha de estilos;

• Utilize ngStyle quando for necessário aplicar estilos de forma dinâmica e direta — por exemplo, ao definir cores, dimensões ou outras propriedades visuais que não estão vinculadas a classes reutilizáveis.

Ao utilizar tanto ngClass quanto ngStyle, é possível controlar de maneira fácil e eficiente a aparência e o comportamento dos elementos com base nos dados do componente — tudo isso sem a necessidade de atualizar manualmente o DOM.