AngularJS supports addClass, removeClass jQuery functionality. Here in below examples we can see how to add a class to an element.
AngularJS is providing ng-class to manipulate classes of elements
Angular2 : If you are looking for Angular2 solution, please click here

Steps to add class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Push classes into above array
$scope.myClass = [];
$scope.myClass.push('red');

Steps to remove class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Pop classes from above array
$scope.myClass = [];
$scope.myClass.pop('red');

Steps to check class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Check index of the class that you want to check
$scope.myClass = ['red'];
if($scope.myClass.indexOf('red') == -1) {
    alert('false');
} else {
    alert('true');
}

Steps to add class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign true for the JSON class name, that you want to add
$scope.myClass = {red:false};
$scope.addClass = function() {
   $scope.myClass.red = true;
}
Try It Your Self

Steps to remove class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign false for the JSON class name, that you want to remove
$scope.myClass = {red:false};
$scope.removeClass = function() {
    $scope.myClass.red = false;
}
Try It Your Self

Steps to toggle class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign opposite boolean value to the JSON class name
$scope.myClass = {red:false};
$scope.toggleClass = function() {
     $scope.myClass.red = !$scope.myClass.red;
};
Try It Your Self

Steps to add class to an elemnt :

  1. Get angular element of html element
  2. Use .addClass() method to add class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.addClass('red');     

Steps to remove class from an element :

  1. Get angular element
  2. Use .removeClass() method to remove class from that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeClass('red');     
Try It Your Self

Steps to toggle class to an element :

  1. Get angular element
  2. Use .toggleClass() method to toggle class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.toggleClass('red');     

Find whether element has particular Class 

  1. Get angular element
  2. Use .hasClass() method to find whether element has class or not

var myEl = angular.element( document.querySelector( '#divID' ) );
if(myEl.hasClass('red')) {
  alert('has class red');
}    

8 comments:

  1. thanks for this post I was looking since many days

    ReplyDelete
  2. Thanks! It was quick help.

    ReplyDelete
  3. This was a nice short & to-the-point post. Thank you mucho!

    ReplyDelete
  4. thanks .. Remove class code snippet really helped me.

    ReplyDelete
  5. thanks .. Remove class code snippet really helped me.

    ReplyDelete
  6. Is great and thanks, but all these should be done in a directive

    ReplyDelete
  7. Suppose I have 3 spans in one div, and two of them has already added class 'red'. Then How can i remove those classes from those 2 spans in angular?

    ReplyDelete
    Replies
    1. var jsEl = document.querySelectorAll('.red');

      for(var i=0; i< jsEl.length; i++) {
      var myEl = angular.element(jsEl[i]);
      myEl.removeClass('red');
      }

      Delete

Blogroll

Follow this blog by Email

Popular Posts