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.

angular.element('#element').addClass("new_class");

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",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});

.red{
  color:red;
}

.blue{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>
</body>

Related Articles