AngularJS ng-style Directive

The AnglarJS ng-style directive facilitates you to set CSS style for the HTML elements. The value of ng-style attribute must be an object, or an expression returning an object. Object contains CSS properties and values, in key value pairs.

It is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies an expression which returns an object where the keys are CSS properties, and the values are CSS values.

Let's take an example to demonstrate the usage of ng-style directive.

See this example:

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome to JavaTpoint!</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "white",
    "background-color" : "brown",
    "font-size" : "40px",
    "padding" : "40px"
  }
});
</script>
</body>
</html>

Test it Now

Example2:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-style-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="">
  <input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'brown'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Welcome to JavaTpoint!</span>
<pre>myStyle={{myStyle}}</pre>
</body>
</html>

Test it Now

Next TopicAngularJS ng-submit Directive

← prev next →