Add remove Class with ngClass in AngularJS

With ngClass directive, it is easier to maintain CSS classes between HTML elements dynamically.

You cannot just pass the class name in ng-class like class attribute.

You need to either use the $scope variable or expression for including classes on the element.

In this tutorial, I am creating a demonstration to add remove class from the element.

Add remove Class with ngClass in AngularJS


Contents

  1. ngClass Syntax
  2. Add Class
  3. Remove Class
  4. Toggle Class
  5. Conclusion

 


 

1. ngClass Syntax

In ngClass directive either you can just pass the $scope variable which contains the classes or use the expressions to add or remove the class.

Without Expression

ng-class="scope-variable-name"

With Expression

ng-class="{class-name: expression1, class-name: expression2, ...}"

In the demonstration, I am using expression syntax.


 

2. Add Class

Define some classes in the <style> and create 2 <div> container and buttons.

In the first <div> set the ng-class='{ div: true, red: class1 }' directive where adding two classes .div and .red.

The class='red' is added when $scope.class1 return true.

Similarly, set ng-class='{ div: true, blue: class2 }' directive where the class='blue' is added when $scope.class2 return true.

On the buttons define ng-click directive to change the value of $scope variables ( class1, class2 ) from the controller.

Script

Assigned false to $scope.class1 and $scope.class2.

Defined two methods addRedClass and addBlueClass to assign true on $scope variable when its gets called.

Completed Code

<!doctype html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <style>
   .div{
     width: 100px;
     height: 100px;
     border: 1px solid black;
     margin-right: 20px;
     margin-top: 10px;
   }
   .red{
     background-color: red;
   }
   .blue{
     background-color: blue;
   }
   </style>
 </head>
 <body ng-app='myapp'>

   <div ng-controller="myCtrl">
     <div ng-class='{ div: true, red: class1 }'></div>
     <div ng-class='{ div: true, blue: class2 }'></div>
     <br><br>
     <input type='button' value='Add red class' ng-click='addRedClass()' />
     <input type='button' value='Add blue class' ng-click='addBlueClass()' />
   </div>
 
   <!-- Script -->
   <script>
   var fetch = angular.module('myapp', []);

   fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.class1 = false;
     $scope.class2 = false;

     // Add red remove
     $scope.addRedClass = function(){
       $scope.class1 = true;
     }

     // Add blue class
     $scope.addBlueClass = function(){
       $scope.class2 = true;
     }

   }]);
   </script>
 </body>
</html>

Demo

Click on the button to add the class on the <div>.


 

3. Remove Class

Set the expression of ng-class to false for removing the class on the button click.

Take the above example and modifying some parts.

Change the method names to removeRedClass and removeBlueClass. Assign value true to the $scope.class1 and $scope.class2 variables.

Completed Code

<!doctype html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <style>
   .div{
     width: 100px;
     height: 100px;
     border: 1px solid black;
     margin-right: 20px;
     margin-top: 10px;
   }
   .red{
     background-color: red;
   }
   .blue{
     background-color: blue;
   }
   </style>
 </head>
 <body ng-app='myapp'>

   <div ng-controller="myCtrl">
     <div ng-class='{ div: true, red: class1 }'></div>
     <div ng-class='{ div: true, blue: class2 }'></div>
     <br><br>
     <input type='button' value='Remove red class' ng-click='removeRedClass()' />
     <input type='button' value='Remove blue class' ng-click='removeBlueClass()' />
   </div>
 
   <!-- Script -->
   <script>
   var fetch = angular.module('myapp', []);

   fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.class1 = true;
     $scope.class2 = true;

     // Remove red remove
     $scope.removeRedClass = function(){ 
       $scope.class1 = false;
     }

     // Add blue class
     $scope.removeBlueClass = function(){
       $scope.class2 = false;
     }  

   }]);

   </script>
 </body>

</html>

Demo

Click on the button to remove the class.


 

4. Toggle Class

I am combining the above two examples.

On the button click check the current $scope variable value if it is true then assign false otherwise true.

Completed Code

<!doctype html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <style>
   .div{
     width: 100px;
     height: 100px;
     border: 1px solid black;
     margin-right: 20px;
     margin-top: 10px;
   }
   .red{
     background-color: red;
   }
   .blue{
     background-color: blue;
   }
   </style>
 </head>
 <body ng-app='myapp'>

   <div ng-controller="myCtrl">
     <div ng-class='{ div: true, red: class1 }'></div>
     <div ng-class='{ div: true, blue: class2 }'></div>
     <br><br>
     <input type='button' value='Add/Remove red class' ng-click='addRemoveRedClass()' />
     <input type='button' value='Add/Remove blue class' ng-click='addRemoveBlueClass()' />
   </div>
 
   <!-- Script -->
   <script>
   var fetch = angular.module('myapp', []);

   fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.class1 = true;
     $scope.class2 = false;

     // Add remove red remove
     $scope.addRemoveRedClass = function(){
       if($scope.class1){
         $scope.class1 = false;
       }else{
         $scope.class1 = true;
       }
     }

     // Add remove blue class
     $scope.addRemoveBlueClass = function(){
       if($scope.class2){
         $scope.class2 = false;
       }else{
         $scope.class2 = true;
       }
     }

   }]);
   </script>
 </body>
</html>

Demo

Click on the button to add remove class.


 

5. Conclusion

Use the ngClass directive on the element where you want to dynamically change class with Angular.

If you like this post then don’t forget to share.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Uday Kumar said:

    This is an awesome tutorial. Please provide angular 4 tutorial also if possible.

    January 3, 2018
    Reply
    • Yogesh Singh said:

      Hi Uday,
      I will try to publish tutorials for Angular 4.
      Subscribe to the blog to get updated.

      January 3, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *