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');
}    

22 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
  8. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    ionic training in chennai

    ReplyDelete
  9. Thank you for sharing this Wonderful information.

    Ionic course | Ionic Training

    ReplyDelete
  10. Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site.
    Web Design Training

    ReplyDelete
  11. Nice blog! This is really worth reading. I'm glad that I found your post. Looking forward for more posts from you.


    Manual Testing Training in Chennai
    Manual Testing Training in Anna Nagar
    Oracle Training in Chennai

    ReplyDelete
  12. your article is very good and very helpful. every one can use and know that how Creating Custom Animations for Use in Tableau. if you want to gif covert to image than check it you can easily understand that how to Use GIF Converter to Get Images for Marketing

    ReplyDelete
  13. คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  14. Awesome post. I am a normal visitor of your blog and appreciate you taking the time to maintain the excellent site. I’ll be a frequent visitor for a long time.

    ACP Sheet
    ACP Sheet Price
    Aluminium Composite Panel

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts