With ngClass directive, it is easier to maintain CSS classes between HTML elements dynamically.
You cannot just pass the class name in ng-class like class attribute.
You need to either use the $scope variable or expression for including classes on the element.
In this tutorial, I show how you add and remove class using ngClass in AngularJS.
Contents
1. ngClass Syntax
In ngClass directive either you can just pass the $scope variable which contains the classes or use the expressions to add or remove the class.
Without Expression
ng-class="scope-variable-name"
With Expression
ng-class="{class-name: expression1, class-name: expression2, ...}"
In the demonstration, I am using the expression syntax.
2. Add Class
Define some classes in the <style> and create 2 <div> container and buttons.
In the first <div> set the ng-class='{ div: true, red: class1 }' directive where adding two classes .div and .red.
The class='red' is added when $scope.class1 return true.
Similarly, set ng-class='{ div: true, blue: class2 }' directive where the class='blue' is added when $scope.class2 return true.
On the buttons define ng-click directive to change the value of $scope variables ( class1, class2 ) from the controller.
Script
Assigned false to $scope.class1 and $scope.class2.
Defined two methods addRedClass and addBlueClass to assign true on $scope variable when its gets called.
Completed Code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.div{
width: 100px;
height: 100px;
border: 1px solid black;
margin-right: 20px;
margin-top: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body ng-app='myapp'>
<div ng-controller="myCtrl">
<div ng-class='{ div: true, red: class1 }'></div>
<div ng-class='{ div: true, blue: class2 }'></div>
<br><br>
<input type='button' value='Add red class' ng-click='addRedClass()' />
<input type='button' value='Add blue class' ng-click='addBlueClass()' />
</div>
<!-- Script -->
<script>
var fetch = angular.module('myapp', []);
fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.class1 = false;
$scope.class2 = false;
// Add red remove
$scope.addRedClass = function(){
$scope.class1 = true;
}
// Add blue class
$scope.addBlueClass = function(){
$scope.class2 = true;
}
}]);
</script>
</body>
</html>
Demo
Click on the button to add the class on the <div>.
3. Remove Class
Set the expression of ng-class to false for removing the class on the button click.
Take the above example and modifying some parts.
Change the method names to removeRedClass and removeBlueClass. Assign value true to the $scope.class1 and $scope.class2 variables.
Completed Code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.div{
width: 100px;
height: 100px;
border: 1px solid black;
margin-right: 20px;
margin-top: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body ng-app='myapp'>
<div ng-controller="myCtrl">
<div ng-class='{ div: true, red: class1 }'></div>
<div ng-class='{ div: true, blue: class2 }'></div>
<br><br>
<input type='button' value='Remove red class' ng-click='removeRedClass()' />
<input type='button' value='Remove blue class' ng-click='removeBlueClass()' />
</div>
<!-- Script -->
<script>
var fetch = angular.module('myapp', []);
fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.class1 = true;
$scope.class2 = true;
// Remove red remove
$scope.removeRedClass = function(){
$scope.class1 = false;
}
// Add blue class
$scope.removeBlueClass = function(){
$scope.class2 = false;
}
}]);
</script>
</body>
</html>
Demo
Click on the button to remove the class.
4. Toggle Class
I am combining the above two examples.
On the button click check the current $scope variable value if it is true then assign false otherwise true.
Completed Code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.div{
width: 100px;
height: 100px;
border: 1px solid black;
margin-right: 20px;
margin-top: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body ng-app='myapp'>
<div ng-controller="myCtrl">
<div ng-class='{ div: true, red: class1 }'></div>
<div ng-class='{ div: true, blue: class2 }'></div>
<br><br>
<input type='button' value='Add/Remove red class' ng-click='addRemoveRedClass()' />
<input type='button' value='Add/Remove blue class' ng-click='addRemoveBlueClass()' />
</div>
<!-- Script -->
<script>
var fetch = angular.module('myapp', []);
fetch.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.class1 = true;
$scope.class2 = false;
// Add remove red remove
$scope.addRemoveRedClass = function(){
if($scope.class1){
$scope.class1 = false;
}else{
$scope.class1 = true;
}
}
// Add remove blue class
$scope.addRemoveBlueClass = function(){
if($scope.class2){
$scope.class2 = false;
}else{
$scope.class2 = true;
}
}
}]);
</script>
</body>
</html>
Demo
Click on the button to add remove class.
5. Conclusion
Use the ngClass directive on the element where you want to dynamically change class with Angular.
If you found this tutorial helpful then don't forget to share.