Angular Conditional CSS Classes (7 Easy Examples)

Angular is dynamic! 🎉 🎉 🎉

And often you need to dynamically apply CSS classes to elements based on certain conditions.

In this guide we're going to explore 7 easy scenarios for using conditional CSS classes in Angular.

1. Applying a Conditional CSS Class in Angular

One way to dynamically apply CSS classes is by using Angular's ngClass directive.

The ngClass directive allows you to add or remove CSS classes based on expressions evaluated in your component.

The basic syntax for ngClass looks like this:

<div [ngClass]="{'class-name': condition}">
  <!-- Content -->
</div>

Here, 'class-name' is the CSS class you want to apply, and condition is the expression that determines whether the class should be applied.

Say we had a list of steps and depending on which step the user was at we would want to apply an active class.

It would look like this.

<ol>
  <li [ngClass]="{ 'active': step === 'step1' }" (click)="step = 'step1'">Step1</li>
  <li [ngClass]="{ 'active': step === 'step2' }" (click)="step = 'step2'">Step2</li>
  <li [ngClass]="{ 'active': step === 'step3' }" (click)="step = 'step3'">Step3</li>
</ol>

2. Applying Multiple Classes Based on Conditions

<ol>
  <li [ngClass]="{ 'class1': step === 'step1', 'class2': step === 'step2' }">Step1</li>
</ol>

Here, depending on the value of step, either class1, class2, or both will be applied to the list item.

3. Toggling Classes with Ternary Operator

<ol>
  <li [ngClass]="step === 'step1' ? 'class1' : 'class2'">Step1</li>
</ol>

This expression applies class1 if step is 'step1', otherwise it applies class2.

4. Using Logical Operators for Complex Conditions

Sometimes, you may need to apply a class based on multiple conditions. Let's say you want to apply a class if isActive is true and isCompleted is false:

<div [ngClass]="{ 'active': isActive && !isCompleted }">
  <!-- Content -->
</div>

This expression checks both conditions and applies the class active if isActive is true and isCompleted is false.

5. Dynamic Class Names from Component Variables

You can also dynamically generate class names based on variables in your component. For example, if you have a variable theme containing the current theme name:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div [ngClass]="this.theme">
      Hello world
    </div>
  `
})
export class AppComponent {
  theme = 'dark';
}

This will apply the class specified by the theme variable to the element.

6. Adding Multiple Classes with Array Syntax

Using an array of classes, you can apply multiple classes conditionally:

<div [ngClass]="['class1', 'class2', (isActive ? 'active' : '')]">
  <!-- Content -->
</div>

Here, class1 and class2 will always be applied, while active will be applied if isActive is true.

7. Using Functions to Determine Classes

You can also use functions in your component to determine which classes to apply:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div [ngClass]="getClasses()">
      My Awesome NG App
    </div>
  `
})
export class AppComponent {
  center = true;
  getClasses(): string {
    return this.center ? 'font-lg flex-center' : 'font-lg';
  }
}

This function dynamically generates the class string based on component variables and returns it to the template.

Conclusion

And that's it for our 7 examples of how to use the ngClass directive in applying CSS classes dynamically.

Angular is an awesome framework. And with the conditional CSS classes you can build awesome web apps.

Till later,

Daniel Kreider