Change CSS of an element using AngularJS

Sunday, 24 August 2014 | Posted by Dasari Srinivas

AngularJS supports .css() jQuery functionality. Here in below examples we can see how to set style to an element.
Angular2 : If you are looking for Angular2 solution, Please click here

Steps to set style to an elemnt :

Get angular element of html element
Use .css() set style to that element

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.css('color','red'));

Try It Your Self

Set style using ng-style

<html ng-app="" ng-controller="myCtrl">
....
<button ng-click="myStyle={color:'red'}">Set Color</button>
<button ng-click="myStyle={'background-color':'blue'}">Set Background color</button>
<button ng-click="myStyle = {}">Set Background color</button>
<div>Click above buttons</div>
<script>
function myCtrl($scope) {
    $scope.myStyle = {};
}
</script>