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

61 comments:

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

    ReplyDelete
    Replies
    1. Great Article
      Cloud Computing Projects


      Networking Projects

      Final Year Projects for CSE


      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  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
  15. Are you looking for the best quality F 100 Classic Ford Truck Parts online? Carolina Classics is the manufacturer of best F-100 Ford Truck Parts | Buy F 100 classic Ford truck parts online at Carolina Classics.

    ReplyDelete
  16. Thanks for sharing this information.
    Want to Buy Step Down Transformer or Are you Curious about What is Step Down Transformer? Read the blog to get your queries resolved before making a purchase.

    ReplyDelete
  17. This is the first & best article to make me satisfied by presenting good content. I feel so happy and delighted.By Learn Digital Marketing Course Training in Chennai it will help to get Digital Marketing Training with Placement Institute in Chennai. If you Learn Social Media Marketing Training with Placement Institute in Chennai, you will get job soon.

    Learn Best Digital Marketing Course Training in Chennai in professional institute to get reputed job.

    ReplyDelete
  18. Great blog thanks for sharing Take care of all your search engine optimization SEO, graphic design, logo creation, social media marketing and digital branding need at one stop - Adhuntt Media. Customer satisfaction and service is our priority - We tread that fine line between projecting your visions into tangible reality! Why wait when you can begin your digital marketing journey with us right now at Adhuntt Media.
    web designing company in chennai

    ReplyDelete
  19. Nice blog thanks for sharing Tidy up your ambience by decorating them with amazing landscape plants in Chennai. Karuna Nursery Gardens is your portal to all the green that the world has to offer. Revolutionize your indoors, garden, terrace or office right now with us.
    rental plants in chennai

    ReplyDelete
  20. Excellent blog thanks for sharing Buy the best beauty parlour products wholesale in Chennai at Pixies Beauty Shop. Thousands of global top-tier brands to choose from and friendly faces all over, we would love to make your Salon journey, one the world recognizes.
    beauty Shop in Chennai

    ReplyDelete
  21. Do you want to know more about web design agency Sempris or about what web design agencies can do for you? Then don't hesitate to contact us ! We are happy to assist you. An exploratory conversation or a free price estimate are certainly possible. Webdesign

    ReplyDelete
  22. Such A nice post... thanks For Sharing !!Great information for new guy like Hanuman Chalisa Lyrics

    ReplyDelete
  23. Very useful blog thanks for sharing IndPac India the German technology Packaging and sealing machines in India is the leading manufacturer and exporter of Packing Machines in India.

    ReplyDelete
  24. Thanks for sharing wonderful information blog, its such a great info. keep update.
    spoken english classes
    English conversation course
    Best english programs

    ReplyDelete
  25. The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

    Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.


    Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

    ReplyDelete
  26. Fine data, considering the producer. This work is truly significant and fundamental.
    Thanks
    Regards
    Methu Robin
    Also, read a blog by Robin
    AI & ML Development Solutions

    ReplyDelete
  27. buy weed online and save money to buy even more legit online dispensary ship all 50 states thanks you for this article buy weed online in addition, buy weed online legit

    ReplyDelete
  28. I love it here. Keep sharing your good vibes. I love them Are you also searching for Cheap Nursing Writing Company? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank

    ReplyDelete
  29. We are offering Passport fake ids and driving license that will help you in many situations USA, Europe Asia Canada, and Australia A counterfeit money Real Passports, Visas, Driver's License ,ID CARDS, Marriage certificates, Diplomas, Birth Certificates, Credit cards, Utility bills, Social Security cards . We have over 20 years of experience.High Quality Undetectable counterfeit Banknotes.

    WhatsApp +17202488130 ( highpills@gmail.com )
    WhatsApp +17202488130 ( highpills@gmail.com )

    ReplyDelete
  30. Jindal Rectifiers is a well-known Manufacturer, Supplier & Exporter of Servo Voltage Stabilizer/Industrial Voltage Regulator, Transformer &  Silicon-Power Rectifiers. For More Info, Visit our Website:- https://jindalelectric.in

    ReplyDelete
  31. UBIQCOM is a GPON ONU Router Manufacturer and Supplier in India. It offers a range of benefits including higher bandwidth, better download speed, faster uploads, higher transmission efficiency and so much more. UBIQCOM is the best GPON router in India and also provides the best GPON router price.

    ReplyDelete
  32. Never miss a stock price change from Gmhi Stock with our Live, Real Time Stock Market Overview! Most of the data is updated every 5 minutes to ensure that you are getting all of the latest Acam Stock change alerts as soon as they happen.

    ReplyDelete
  33. The Where To Buy Ubx Coin is a cryptocurrency with a set price of $1.00. It is the only cryptocurrency that offers the most value for the money, with an equal value of 1000 coins per dollar. Find the best place where to buy Ubx coin today by reading this article!

    ReplyDelete
  34. Get the latest Ftoc Stock quotes, news and trends at your fingertips across all of your devices, available 247. Our stock quote system helps financial professionals keep up on the latest data and locate charts to help in their own business.

    ReplyDelete
  35. Nice information. I’ve bookmarked your site, and I’m adding your RSS feeds to my Google account to get updates instantly. Re Loader Activator Crack

    ReplyDelete





  36. Buy Cow /Ox Gallstone Available On Stock Now @ (WhatsApp: +237673528224)

    DESCRIPTION
    -Full substance,
    -100% machine flayed
    -No ticks, no scratches, no humps
    -Size: 32 to 40 sq. ft.
    -Average size: 36 sq. ft.
    -Weight: 22kgs to 32kg
    -Average weight: 25kgs
    -Selection: 80% A/B, 20% C/D
    -Male 75% / Female 25%
    -1 x 40 container = 1700-2000 hides
    -Availability: 10 x 40 ft container
    - Impurity: No sand, No dust, No mud, No foreign object, no fats and no meat
    - Not available: No hair slip problem, No rotten Hides, No fats and meat on the Hides, No

    mule
    - No Holes, No Cuts, No Reheated,
    -Sand: non and clean from any other dust or mud.

    All Inquiries Below

    Email: infodocuments4@gmail.com
    WhatsApp: +237673528224


    Cow /Ox Gallstones

    Specifications

    Cow /Ox Gallstones for sale for (wholestone / brokenstone ratio is 80% / 20% )
    We are full time exporters of high quality natural ox gallstone.
    Our product obtained from disease free cattle.
    We can supply up to 10 Kg. monthly. Shipment prompt by air courier (DHL).

    Price depends on the ratio of wholestone / brokenstone.

    wholestone / brokenstone ratio is 80% / 20%
    wholestone / brokenstone ratio is 70%/30%
    wholestone / brokenstone ratio is 60%/40%

    Functions:

    To clear heat and release toxins.
    To eliminate endogenous wind and stop convulsions.
    to resolve phlegm and promote resuscitation.If you wish to try out what we
    have,then we will be so much so pleased to get your inquiry.

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. thank you for sharing this one! glad that i bumped into this which is will definitely going to use to sell our one of House and Lot in the Philippines

    ReplyDelete
  39. Grandstream GWN7664LR is an outdoor 802.11ax 4×4:4 Wi-Fi 6 access point for medium-to-large businesses and enterprises who need to provide long-range coverage in both indoor and outdoor spaces.

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. To install Office Setup, go to office.com/setup website and enter the Office Setup product key.

    ReplyDelete

Blogroll

Popular Posts