, , , , ,

ng-class Uses Cases, Examples, and Recommendations

ngClass is a very powerful built-in Angular directive for dynamically changing CSS classes on HTML elements. It does this by allowing us to bind scope values as class names. We can then use the state of our application (what variables are currently assigned to) to assign classes to divs, h2s, you name it.

Summed up, this directive can be used in variety of ways to change styles and hide/show content.
ngClass has a wide variety of syntaxes that take many types of expressions.  With these, you can bend ng-class to style just about anything in Angular. We’ll cover the definitions of each and explain the examples in action.

A quick note on separation of concerns

Developers who use Angular have different opinions on whether you should mix CSS classes into your JavaScript controllers. For some, this violates the principles of separation of concerns (that styling and functionality should be separate) but others are ok with it.  Some of these examples will mix CSS and JS but it’s worth knowing that not everyone does this. With some of syntaxes of ngClass, it’s almost unavoidable.

Syntax #1 – String Syntax

The string syntax is very simple to use.  Simply put a string into the ng-class expression and that string will be used as the CSS class.

See the Pen Apply classes in angularJS using string syntax by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

This example is pretty straightforward, the scope variable of btnClass is initiated as ‘danger’.  The ng-model of the input field is bound to the that same $scope.btnClass variable.  When a different string is put into it, the expression evaluates and checks changes the background-color if that CSS class exists.

Syntax #2 – Array Syntax

Definition: The array syntax is very similar to the array syntax except it allows for adding more than one class.  The array gets put right into the quotes in the ng-class expression.  This is helpful if you need to apply multiple classes.  You’ve probably seen a <div> with multiple classes like ‘dialog-settings template modal’.  The array syntax can be useful for this.
See the Pen AngularJS – ngClass Example by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Here’s a very simple example of the array syntax. By adding classes into the input boxes, you can add classes to the array thereby changing that actual CSS class on the <p> element.

Syntax #3 – Map Syntax

Ok, here’s where it gets a lot more interesting.  The map syntax will change a CSS class according to how values get evaluated in an object.  The CSS class changes according to whether the values evaluate to a value or often to truthy/falsey.  So what the heck does this actually look like in action?
Imagine you have this in your controller:

$scope.firstcssclass = false
$scope.secondcssclass = true
$scope.thirdcssclass = true

Then you have this in your template:

<div ng-class="{large: firstcssclass, red: secondcssclass, clear: thirdcssclass}"></div>

This would evaluate to:

<div class="red clear"></div>

So that’s a pretty basic example.  Here’s a more interesting example from a codepen by Jason McGovern.
See the Pen AngularJS ng-class conditional by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

How does this particular ng-class example work?  Let’s walk through these expressions.

ng-class="{clearance: item.clearance, new: item.salesStatus === 'new'}"

So, if you notice in the CSS, both clearance and new are CSS styles.  Item.clearance and item.salesStatus are properties on the item in the ng-repeat.  In this case, they are properties in the objects in the array $scope.products in the controller.
Here’s how these will evaluate: the items will get a class of clearance if the property of clearance is true (aka truthy).  The items will get a class of new if the property of salesStatus equals (===) true.

Syntax #4 – Ternary Syntax

The conditional ternary syntax exists in most major programming languages. In JavaScript, the syntax looks like this: condition ? expr1 : expr2.  Think of the ternary operator as a shortened way of say if (true) { do this } else {do this }.  It quickly returns a value on whether something is true or false.
The ternary syntax in Angular (released in 1.1.5, eons ago!) does a similar thing.  It is a syntax for assigning one class if an expression is truthy, and another class if the expression evaluates falsey.

ng-class="valuethatisTrueorFalse ? 'css_class_iftrue' : ‘css_class_iffalse’”>

(Mind the use of double and single quotes).
A quick example of this is this nifty bit of code from StackOverflow user Ikrom:

<span> {{userType=='admin' ? 'Edit' : 'Show'}} </span>

Here’s what this code is doing.  If the usertype of admin is true, it evaluates to the class of Edit (likely exposing something an admin would need to see).  If the admin property is set to false, the class becomes Show.  The ternary operator is helpful for examples like this where CSS classes need to be toggled.
Here’s another toggling jsfiddle example from Alex Paluzzi:

As you can see, ng-class has a lot of power in both its syntaxes and the expressions you can use in them.  It’s definitely one of the most powerful tools to have in your Angular toolkit.