How to toggle class using AngularJS ?

29 Sep, 2020
In this article, we will toggle the class of an element with the help of AngularJS.
Approach 1: 
In this example, when a button is clicked then the class of an element is changed. 
So, a function is called when the button is clicked. 
That function toggles the class from val to !val(means 0 to 1 and vice-versa). 
In the function called, we simply check if it class1 then change it to class2 else do the opposite.
Example 1:
HTML
<!DOCTYPE HTML><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);        myApp.controller("controller",            function ($scope) {                $scope.val = 0;                $scope.toggleClass = function (sel) {                    if ($scope.val == 0) {                        $scope.val = 1;                    }                    else {                        $scope.val = 0;                    }                };            });    </script>      <style>        .class1 {            color: white;            background: blue;        }          .class2 {            color: white;            background: green;        }    </style></head>  <body style="text-align:center;">    <h1 style="color:green;">        GeeksForGeeks    </h1>        <p>        Toggle Class in angularJS    </p>      <div ng-app="app">        <div ng-controller="controller">            <div ng-class="{'class1':!val,                 'class2': val}">                {{ val }}            </div>            <a href="javascript:void(0);"                 ng-click='toggleClass();'>                Click to toggle class            </a>        </div>    </div></body>  </html>
Output:
Approach 2: 
This example is somewhat similar to the previous one but used boolean values in place of 0 and 1. 
So, a function is called when the button is clicked. 
That function toggles the class from val to !val(means true to false and vice-versa). 
In the function called, we simply check if it class1 then change it to class2 else do the opposite.
Example 2:
HTML
<!DOCTYPE HTML><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);        myApp.controller("controller",            function ($scope) {                $scope.val = true;                $scope.toggleClass = function (sel) {                    if ($scope.val == true) {                        $scope.val = false;                    }                    else {                        $scope.val = true;                    }                };            });    </script>      <style>        .class1 {            color: white;            background: blue;        }          .class2 {            color: white;            background: green;        }          #div {            height: 50px;            width: 130px;            color: white;            margin: 0 auto;        }    </style></head>  <body style="text-align:center;">    <h1 style="color:green;">        GeeksForGeeks    </h1>        <p>        Toggle Class in angularJS    </p>      <div ng-app="app">        <div ng-controller="controller">            <div id='div' ng-class=                "{'class1':!val, 'class2': val}">                {{ val }}            </div>            <a href="javascript:void(0);"                 ng-click='toggleClass();'>                Click to toggle class            </a>        </div>    </div></body>  </html>
Output:
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property