How to change the button color after clicking it using AngularJS ?

Last Updated : 01 Aug, 2022

Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, the ng-controller directive is applied to add the controller to the application, which can be utilized to add methods, functions, and variables, which in turn, can be called on some event like click, etc to perform a certain action.

Approach: In this approach, we will try to change the class or id of the button, and the CSS of those classes/IDs will change the background color of the button.

Example 1: In this example, the class is changed from red to green using the ng-click directive in AngularJS.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//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.myButton = 'red';
            $scope.changeCol = function() {
                $scope.myButton = "green";
            };
        });
    </script>
    <style type="text/css">
        .red {
            background: red;
            color: white;
        }
         
        .green {
            background: green;
            color: white;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to change the color
        of the button in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <button ng-click="changeCol()"
                    class="{{myButton}}">
                 Click to change 
            </button>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, the id of the button is changed from blue to green using the ng-click directive in AngularJS.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//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.ID = 'blue';
            $scope.changeCol = function() {
                $scope.ID = "green";
            };
        });
    </script>
    <style>
        #blue {
            background: blue;
            color: white;
        }
         
        #green {
            background: green;
            color: white;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to change the color of
        the button in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <button ng-click="changeCol()"
                    id="{{ID}}">
                 Click to change
            </button>
        </div>
    </div>
</body>
</html>