Adding multiple class using ng-class

Revati S Misra 912 17 Jun 2024

1 Answers

Ashutosh Patel 18 Jun 2024

Add multiple classes using `ng-class`

In AngularJS, you can use the ng-class directive to dynamically apply multiple classes to an element based on expressions in your controller or directly in your template.

Here’s how you can do this.

Use object syntax

You can use object syntax with ng-class where each key is a class name and its value is a boolean expression indicating whether the class should be used.

<div ng-class="{ 'class1': condition1, 'class2': condition2, 'class3': condition3 }">
 <!-- Content here -->
</div>

in the above syntax

class1, class2, and class3 are optional class names.
condition1, condition2, and condition3 are boolean expressions that specify the scope of your controller indicating whether each class should be used (true) or not (false).

Example

HTML

<div ng-class="{ 'red': isError, 'bold': isImportant, 'italic': isItalic }">
 <!-- Content here -->
</div>

Controller

$scope.isError = true;
$scope.isImportant = false;
$scope.isItalic = true;

In this case <div> have red and italic classes, because isError and isItalic are true, isImportantis false.

Array Syntax

You can also use an array syntax with ng-class where each element in the array is a class name added with no entry.

<div ng-class="[ 'class1', 'class2', 'class3' ]">
 <!-- Content here -->
</div>

Example-

<div ng-class="[ 'alert', 'alert-' + type, { 'alert-dismissible': dismissible } ]">
 <!-- Content here -->
</div>

In the example above

'alert' and 'alert-' + type are added with nothing as class.
{ 'alert-dismissible': dismissible } There is an object to add the alert-dismissible class if dismissible evaluates to true.

Combining Methods

You can also combine both methods for more flexibility.

<div ng-class="[ 'class1', { 'class2': condition2 }, 'class3' ]">
 <!-- Content here -->
</div>

In the example above

class1 is added unconditionally.
class2 is added if condition2 evaluates to true.
class3 is added unconditionally.

Example-

here is a simple example to add/remove multiple classes using ng-class

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Apply Filter Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

    <style>
        /* styling the text based on classes */
        .highlight {
          background-color: yellow;
        }
        .italic {
          font-style: italic;
        }
        .underline {
          text-decoration: underline;
        }
      </style>
</head>

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <!-- text in which classes add/remove dynamically -->
        <h2 data-ng-class="{ 'highlight': isHighlighted, 'italic': isItalic, 'underline': isUnderlined }">
            Example Text
        </h2>
        <!-- multiple classes add dynamically based on checked -->
        <label><input type="checkbox" ng-model="isHighlighted" checked= "checked"> Highlight</label><br>
        <label><input type="checkbox" ng-model="isItalic"> Italic</label><br>
        <label><input type="checkbox" ng-model="isUnderlined"> Underline</label>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
            // by default all the classes is false
            $scope.isHighlighted = false;
            $scope.isItalic = false;
            $scope.isUnderlined = false;
        });

    </script>

</body>
</html>

Output-