Conditionally Apply a CSS Class with AngularJS

  • Estimated read time: 4 min read
  • Written by Chad Campbell on Sep 17th 2013

Sometimes you need to change your view's CSS classes on-the-fly. AngularJS's declarative data binding syntax makes it fun and easy to conditionally apply CSS classes. To demonstrate, we'll modify the demo we showed when creating a checkbox list with AngularJS. If you want to see what the final result of this post will look like, take a peak at the demo. As you'll see, we can dynamically change the CSS class in two (or three) steps.

Step 1: Add the CSS classes

In the context of this blog post, we're going to have two CSS classes. The first CSS class will be used for the default, unchecked state of a checkbox. The other CSS class will be used when a checkbox is checked. The two classes we'll use are defined as follows:

.uncheckedClass {
    background-color:#eeeeee;
    color:black;
}

.checkedClass {
    background-color:#3ab44a;
    color:white;
}

These classes were named using the following style: '{state}Class'. Personally, I do not recommend appending 'Class' to your CSS class names. This style choice was made to make it easier to read the code in the next step.

Step 2: Add the ngClass directive to the view

The ngClass directive empowers you to change CSS classes in the view through the use of an expression. In our case, we want set the CSS class to 'checkedClass' when the team is selected. We can do this with the help of the ng-class attribute in our view as shown here:

This snippet says: 'for every team in the model, create a DIV element with a checkbox and the team's name. When the team's checkbox is checked, make the background green and the text white.' This occurs when the in-scope team has its isChecked property updated. We have one challenge at this point though, what about the default state?

Step 3 (optional): Set the default class

In the event a team is not selected, we want the background color to be gray, and the text to be black. The team may be unchecked either by default, or get unchecked through user interaction. To declaritively set the CSS class used when the team is not selected, we have two options:

1. Use the HTML class attribute

The first option is to use the traditional HTML class attribute. This approach is probably the most familiar. An updated version of the code from step 2 using this approach is shown here:

As another option, you can use the following alternative.

2. Add a new condition to our expression

In the event that you want to keep your CSS class settings together, or you're relying on some other boolean flag in your model, you can update your expression. The expression can take as many class name/boolean value mappings as you want. An example of adding a new mapping is shown here.

<div ng-repeat="team in teams"          
  ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">
  <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
  </label>
</div>

The finer details of using an expression with ng-class can be found here. Both approaches work just fine. In our demo we used option 1 for two reasons. First, we found it more familiar. Second, it requires less (by the slimmest of margins) processing at runtime.

These three steps show how to conditionally apply a CSS class with AngularJS. If you want to see a completed example, you can view it here. The code used for this blog post can pulled from GitHub. If you have any questions or comments related to this post, please leave them in the comments below. If you would like other help from Ecofic, please contact us.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Follow Chad Online