VOOZH about

URL: https://www.geeksforgeeks.org/angular-js/how-to-change-the-button-color-after-clicking-it-using-angularjs/

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


  • Courses
  • Tutorials
  • Interview Prep

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

Last Updated : 23 Jul, 2025

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 directivethat 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.

Output:

👁 Image
 

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

Output:

👁 Image
 
Comment
Article Tags:

Explore