Tutorialsplane

AngularJs Change Button Color


AngularJs Change Button Color: There are many ways to change button color in angularjs. Here in this tutorial we are going to explain some of them. You can use our online editor to edit and try the code.


AngularJs Change Button Color onclick Example

You can use the ng-class to change the background color of the button. Let us go step by step –

JavaScript Part

JavaScript Part Contains the following script as below –

AngularJs Change Button Color Example :

<button ng-click="changeBgColor()" class="{{myButton}}">My Button</button> 

Css Part

Css Part Contains the following style as below –

AngularJs Change Button Color ng-click Css :


Complete Part

Now let us create the full example as below-

AngularJs Change Button Text / Label Example :




 
 


  
<div ng-app="myApp">  
<div ng-controller="myController">  
        <button ng-click="changeBgColor()" class="{{myButton}}">My Button</button>
		
 
</div> 
</div>
  

Try it »

If you run the above example it will produce the output something like this –