In Angular, attribute directives play a key role in dynamically changing the behavior and appearance of elements without modifying the structure of the DOM. Two of the most commonly used attribute directives are ngClass and ngStyle. These directives provide flexible ways to control element styles and CSS classes based on the component's state.

What is ngClass?

This is especially useful when you want to change the appearance of an element in response to data changes — for example, highlighting an active item or applying styles based on status.

ngClass supports object syntax, arrays of strings, and functions that return these formats for applying classes dynamically.

Object Syntax

Use an object where the keys are class names and the values are boolean conditions. If the condition is true, the class is applied.

In this example, classes are added or removed based on the value of the isActive property in the component.

If isActive is true, the active class is added and inactive is removed. If isActive is false, it's the other way around.

Array of Strings

Use an array where each string represents a CSS class name that will be added to the element. This approach is useful when you want to apply multiple classes dynamically without conditions.

Here, the classes listed in the array are applied to the element.

Using an array is helpful when you want to dynamically assign multiple classes — especially when the number of classes may vary.

Function

Use a function that returns any of the supported formats: an object, an array of strings, or a single string. This is useful when the applied classes depend on more complex logic or dynamic conditions.

ngClass can also accept a function that returns an object, array, or string depending on the logic you define.

In this case, the getClass() method returns an object with CSS class names as keys and boolean conditions as values.

• If isError is true, the error-class will be applied;
• If isSuccess is true, the success-class will be applied;
• If both are false, no classes will be added.

What is ngStyle?

With ngStyle, you can change properties like background color, font, size, positioning, and more — all directly from the component.

How Does ngStyle Work?

ngStyle accepts an object where the keys are CSS property names and the values are expressions that are evaluated during rendering.

If an expression returns a value, that value is applied to the corresponding CSS property of the element.

Example With a Style Object

In this example, we dynamically change the text color and font size of the element:

If textColor is red and fontSize is 20px, those styles will be applied to the element. This approach allows you to easily combine multiple styles in one expression for greater flexibility.

Example Using a Variable and Expression

If you need to apply styles based on logic, you can use expressions directly in the template:

If isActive is true, the background color will be green; if false, it will be red. Here, a ternary operator is used to make the logic concise and expressive.

Example With a Dynamic Value

Expressions in ngStyle can also be based on methods. You can use component methods to calculate style values dynamically:

In this example, the getDynamicStyle() method returns a style object based on the current value of isDarkMode.

This is especially useful when styles depend on external conditions like user preferences, time of day, or app themes.

When Should You Use ngClass vs ngStyle?

• Use ngClass when working with predefined CSS classes. This is ideal when styles are reused in multiple places and you want centralized style control through your stylesheet;

• Use ngStyle when you need to apply styles dynamically and directly — for example, when setting colors, dimensions, or other visual properties that aren't tied to reusable classes.

By using both ngClass and ngStyle, you can easily and efficiently control the appearance and behavior of your elements based on component data — all without having to manually update the DOM.