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

Created a HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS.

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.

<!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> 
    <p> 
        How to change the color 
        of the button in AngularJS 
    </p> 
    <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.

<!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 type="text/css"> 
        #blue { 
            background: blue; 
            color: white; 
        } 
  
        #green { 
            background: green; 
            color: white; 
        } 
    </style> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1> 
    <p> 
        How to change the color of 
        the button in AngularJS 
    </p> 
    <div ng-app="app"> 
        <div ng-controller="controller"> 
            <button ng-click="changeCol()" 
                id="{{ID}}"> 
                Click to change</button> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts: