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

14 Oct, 2020
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property