Hit enter after type your search item

How to use angular ng-class directive

The ng-class directive in Angular

For dynamically adding or removing the CSS classes from the HTML elements like div, span, input fields etc. you may use the ng-class directive.

You may specify the CSS classes in different ways in the value of ng-class directive.

Following are the ways:

  • One way is to use the string in the value of ng-class for specifying CSS class names. There, you may specify one or more classes. If you specify more than one class then separate those by spaces. For example:

<p ng-class=”className className2″>Content here </p>

  • You may also use an object as the expression. In that case, the true value keys will be used as class names.
  • The expression in the ng-class can also be an array. The array elements can be strings or objects as in above two cases.

See the following section for using the ng-class Angular directive in different ways.

A demo of ng-class with a div and textbox

In this example, a number of CSS classes are created in the <style> section. A textbox is given where you may enter any class name from the given classes. You can see the available class names in the textbox as the demo page loads. The entered class will apply to the text given in the div element by using ng-class directive.


See online demo and code

The code:


The CSS used in example:


An example of ng-class with array

In this example, an array of CSS class names is created in the controller part. The class names are assigned to HTML select dropdown as the web page loads. As you select a class name, the class is applied to the div element. Have a look by clicking the link or image below:

ng-class array

See online demo and code

The code:


Using a Boolean expression in ng-class with HTML table

In this example, the Boolean expression is used in the ng-class directive. The ng-class is used in the table tag of HTML. A checkbox is given which value can be true or false. If this is false (unchecked), the redclass will be applied to the table. If true, the greenclass will apply. Initially, the table is given a few Bootstrap built-in classes:

ng-class true false

See online demo and code

The code:


Get the complete code from the demo page.

A demo of using the ternary operator or “if…else”

You may also use ternary operators in the Angular ng-class attribute for conditionally applying one or more classes to the HTML elements. The ternary operators work like the if..else statement, so, you will use one or more conditions to apply CSS classes.

See this example where I used a textbox for entering the numbers. If you enter the number less than or equal to 10 then the greenclass will apply. If the number is greater than 10 and less than 20, the redclass will apply. The third condition is to check the number greater than 20. So, if the number is more than 20, the blueclass will apply along with Bootstrap’s well class.

The default class is yellowclass which is applied as the demo page loads, have a look:

ng-class if else

See online demo and code

The code:


Following is the CSS used that will apply conditionally:


You may use as many conditions as you need by using ternary operators. Also, you may define the default class. If you want to use multiple classes then separate those by space.

This div height required for enabling the sticky sidebar