AngularJS ng-style Directive
AngularJS Example
Add styles using AngularJS with CSS key=>value object format:
<body ng-app="myApp" ng-controller="myCtrl"><h1 ng-style="myObj">tutorialpro.org</h1>
<script>var app = angular.module("myApp", []);app.controller("myCtrl",
function($scope) { $scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px" }});</script></body>
Definition and Usage
The ng-style directive adds a style attribute to an HTML element.
The ng-style attribute value must be an object, and the expression returns an object.
The object consists of CSS properties and values, i.e., key=>value pairs.
Syntax
This attribute is supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| string | The expression returns an object consisting of CSS properties and values. |