ng-style directive in AngularJS


The ng-style directive allows you to set CSS style on HTML element using expression.

Syntax:
<p ng-style="customestyle">text</p>

Example:
In this example we will apply customstyle expression to paragraph using ng-style. and when user select any of the checkbox, ng-change fires the checkbox change event and update the customstyle based on the selection.




Select the above option to change this paragraph styles.


Source code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <input id="chbbg" type="checkbox" ng-model="bgcolor" ng-change="setstyle();" /><label for="chbbg">Set background color green</label> <br /> <input id="chbcolor" type="checkbox" ng-model="fontcolor" ng-change="setstyle();" /><label for="chbcolor">Set color white</label> <br /> <input id="chbfontwt" type="checkbox" ng-model="fontbold" ng-change="setstyle();" /><label for="chbfontwt">Set font weight bold</label> <br /> <input id="chbpad" type="checkbox" ng-model="padding" ng-change="setstyle();" /><label for="chbpad">Set Padding</label> <br /> <p ng-style="customestyle"> Select the above option to change this paragraph styles.</p> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.bgcolor = true; $scope.fontcolor = true; $scope.fontbold = true; $scope.padding = true; $scope.setstyle = function () { $scope.customestyle = { "background-color": $scope.bgcolor ? "green" : "", "color": $scope.fontcolor ? "#fff" : "", "font-weight": $scope.fontbold ? "bold" : "", "padding": $scope.padding ? "10px" : "" }; }; $scope.setstyle(); }); </script> </body> </html>