1. Home
  2. Languages
  3. AngularJS
  4. Mastering AngularJS: How to Use ng-class for Dynamic Styling
Searching...

Mastering AngularJS: How to Use ng-class for Dynamic Styling


When building modern web applications with Angular, dynamic styling plays a crucial role in improving user experience by allowing your app to respond visually to changes in state or data. One of the powerful tools Angular offers for dynamic styling is the ng-class directive. This guide will walk you through how to implement ng-class effectively to add dynamic CSS classes based on your component’s logic.

What is ng-class?

ng-class is an Angular directive that lets you dynamically set CSS classes on an HTML element. Unlike static class assignments, ng-class updates the element’s class list based on an expression, enabling you to conditionally apply styles in response to your app’s state.

Why Use ng-class?

  • Simplifies dynamic styling: No need for cumbersome manual DOM manipulation.

  • Keeps markup clean: You can manage classes through expressions rather than toggling classes imperatively.

  • Improves maintainability: CSS and logic stay separated but work seamlessly to reflect UI changes.

  • Enhances reactivity: Angular updates classes in response to changes automatically.

How to Implement ng-class in Angular

1. Using an Object Expression

You can pass an object to ng-class where the keys are CSS class names and the values are boolean expressions that Angular evaluates.

<div [ngClass]=”{ ‘active’: isActive, ‘disabled’: !isActive }”>
Click me!

In your component:

typescript
export class MyComponent {
isActive = true;
}

Here, the active class will be applied if isActive is true, otherwise, the disabled class will be applied.

2. Using an Array of Class Names

If you want to apply multiple classes conditionally, you can provide an array of class names.

<div [ngClass]=”getClasses()”>
Multi-class example

In your component:

typescript
export class MyComponent {
isPrimary = true;
isLarge = false;

getClasses() {
return [
this.isPrimary ? ‘primary’ : ‘secondary’,
this.isLarge ? ‘large’ : ‘small’
];
}
}

3. Using a String Expression

You can directly bind a string of classes.

<div [ngClass]=”currentClass”>
String class example

In your component:

typescript
export class MyComponent {
currentClass = ‘bold italic’;
}

The element will have both the bold and italic classes applied.

Real-Life Example: Toggling Button Styles

Imagine you have a button that toggles between an active and inactive state with different colors.

Template

<button [ngClass]=”{‘btn-active’: isActive, ‘btn-inactive’: !isActive}” (click)=”toggle()”>
{{ isActive ? ‘Active’ : ‘Inactive’ }}

Component

typescript
export class ToggleButtonComponent {
isActive = false;

toggle() {
this.isActive = !this.isActive;
}
}

CSS

css
.btn-active {
background-color: green;
color: white;
}

.btn-inactive {
background-color: gray;
color: black;
}

When the button is clicked, it switches its styles dynamically thanks to ng-class.

Best Practices for Using ng-class

Conclusion

Implementing dynamic styling with Angular’s ng-class directive is straightforward and effective. By binding CSS classes to your component’s state or logic, you create responsive, interactive, and visually appealing apps without code bloat. Whether you use object syntax, arrays, or strings, ng-class helps keep your HTML clean and your styles flexible.

Mastering ng-class is a small but important step toward creating polished Angular applications that users love to interact with. Happy styling!

Updated on July 4, 2025
Was this article helpful?
Yes No

About The Author

mdc

mdc has not written a bio yet29

Related Articles

Leave a Comment