The ng-style directive
The angular ng-style directive can be used for applying the CSS to the specified elements of HTML.
For example, upon clicking a button, you may change the background color, font size etc of a paragraph as using the ng-style attribute.
This is how you may use the ng-style directive.
As HTML element attribute:
<div ng-style="expression"> ... </div>
Where, you may use a paragraph, span or other elements in place of a div.
You may also use ng-style as CSS class:
You may apply CSS by using ng-style conditionally. Have a look at the live demos below with complete code for learning more about this directive.
A demo of changing color of text by using ng-style
In this simple example, as you click the button “Apply Color by ng-style”, the color of the text will change. In the input type button tag, the ng-click attribute is used while the ng-style is used in the span tag that contains the text.
The code:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container" >
<div class="page-header text-center">
<input type="button" class="btn btn-success" value="Apply Color by ng-style" ng-click="setStyle={color:'#FFA448'}">
<span ng-style="setStyle">A demo of ng-style</span>
</div>
</div>
</body>
</html>
A example of applying multiple properties
In this example, multiple CSS properties are applied by using ng-style directive.
Note that, multiple CSS properties are separated by commas.
The background-color property is enclosed in single quotes, unlike the color I used in the above example.
Again, press the button to apply color, background color, font size, border radius properties to a paragraph tag.
The code:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container" >
<div class="page-header text-center">
<input type="button" class="btn btn-success" value="Apply CSS by ng-style" ng-click="setStyle={color:'#008040','background-color':'#FFA448',border:'dashed 3px #804000','border-radius':'10px','margin-top':'10px'}">
<p ng-style="setStyle">A demo of ng-style</p>
</div>
</div>
</body>
</html>
A demo of applying CSS by using an object
In this demo, the CSS properties are applied by using an object. A paragraph is used where the ng-style attribute is used and an object is given as expression. In the controller, different CSS properties like background, border, border-radius etc are set for the paragraph. Click on the button, and it will display the paragraph with applied CSS properties:
The code:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.divclass {
background: #486273;
height: auto;
width:240px;
border-radius: 14px;
padding:10px;
}
</style>
</head>
<body>
<div class="container" ng-app="showdemo" ng-controller="ShowController">
<h3>A demo of ng-style</h3>
<div class="row">
<div class="col-md-3">
<button ng-click="shdiv = !shdiv" class="btn btn-success btn-lg">Show/Hide paragraph</button>
</div>
<div class="col-md-3 divclass" ng-show="shdiv">
<p ng-style="CSSObj">ng-style demo</p>
</div>
</div>
</div>
<script>
var showdemo = angular.module('showdemo', [])
.controller('ShowController', function($scope) {
$scope.shdiv = false;
$scope.CSSObj = {
"color" : "#fff",
"border-radius" : "15px",
"margin" : "10px",
"background-color" : "#FFB062",
"font-size" : "20px",
"padding" : "20px"
}
});
</script>
</body>
</html>
The example also uses a little CSS in the <style> section. You may see and get the complete code from the demo page.