How to add / remove a native CSS class in AngularJS (do not rely on jQuery)?


I want to add/remove CSS classes just like jQuery's $('#element').addClass('new_class') and removeClass(). Does AngularJS offer a native solution that doesn't require jQuery or jQLite? Our main developer says he's going to remove jQuery for performance reasons, so I need a native solution.

I believe the example below uses jQLite, which would also be removed.


Is there a truly native option?

P.S. I've used ngClass, and that doesn't seem to suit my need, since I need to control it from the Controller. I'm basically utilizing the Animate.css library for animations, thus on certain events I need to add/remove CSS classes to trigger the animation. I don't think I can achieve this with ngClass.

You just need to bind a variable into the directive "ng-class" and change it from the controller. Here is an example of how to do this:

var app = angular.module("ap",[]);

  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
      $scope.class = "red";

<script src=""></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>