Why do we use ng-style instead of style in AngularJS for css formatting?

Question

I started working with AngularJS for the past few days.

I just want to know why do we use ng-style when we have style tag for styling our components in static and dynamic webpages. I hope i get a solution for what we use ng-style in particular for styling in AngularJS.

Answer 1

The difference between style and ng-style, is that ng-style binds an expression.

It means it will evaluated the expression as an Angular code. For example:

span {
  color: black;
}

 <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app="">
  <button ng-click="myStyle={color:'red'}">Set color</button>
  <button ng-click="myStyle={'background-color':'blue'}">Set background</button>
  <br/>
  <span ng-style="myStyle">Set my style with ngStyle!</span>
  <pre>myStyle={{myStyle}}</pre>
</div>

ng-style="myStyle" will look for $scope.myStyle in your controller, and bind its content to style.

Answer 2

Per definition:

• style is an HTML attribute.
• ng-style is an AngularJS directive

Explanation:

The difference is in that style, allows you to set the element's style directly via the attribute thats native to the element, but if you'd want to, for example, do something more dynamic, such as have the style change on a certain condition. You'd need to use JavaScript to do so. In the context of AngularJS, that is where ng-style comes in.

ng-style will allow you to alter or set the style of an element using Angular JavaScript based on whatever your need is at any specific time.

Example:

Here is a fiddle demonstrating the usage of both (or see below)

In your markup.

<div style="background: red"> this is set using the style property</div>

<div ng-style="getStyle('111111')"> set using ng-style</div> 

In your angular controller.

getStyle = function(colour) {
    return {"background": "#" + colour};
}

In the above example getStyle is a function that allows you to pass in a colour value that the ng-style directive in turn, will bind to the DOM element. Of course this can get as dynamic or flexible as per what you need want to do. (eg have the colour change on a click of a button, on a hover event, etc.)

Answer 3

As per @Mistalis answer ng-style binds an expression.

Ex.. If we want dynamically set width or height, in this kind of place we can choose ng-style.

What is the difference between ng-class and ng-style?

var app = angular.module('exApp', []);
app.controller('ctrl', function($scope) {
    $scope.sty = 40;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="exApp" ng-controller="ctrl">
  <button ng-click="sty=sty+10">Click Me +</button>
  <button ng-click="sty=sty-10">Click Me -</button>
  <br/> <br/>
  <div ng-style="{background:'#789',height:sty + 'px', width:sty + 'px'}">See Now</div>
  <br>
  <p>Size: {{sty}}</p>
</div>