AngularJS ng-style Directive
Last Updated :
03 Aug, 2022
The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements.
Syntax:
<element ng-style="expression">
Content ...
</element>
Parameter:
- expression: It represents the return type of the expression will be an object, in the form of key: value pair, where the key denotes the CSS properties & the value denotes the respective value assigned to it.
Example: This example illustrates the basic implementation of the AngularJS ng-style Directive.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >AngularJS ng-style Directive</ title >
</ head >
< body ng-app = "app" ng-controller = "gfgCtrl" >
< h1 ng-style = "gfgData" >GeeksforGeeks</ h1 >
< script >
var app = angular.module("app", []);
app.controller("gfgCtrl", function($scope) {
$scope.gfgData = {
"color": "white",
"background-color": "green",
"font-family": "sans-serif",
"text-align": "center"
}
});
</ script >
</ body >
</ html >
|
Output:
Example: This example illustrates the implementation of the ng-style Directive by changing the styles for the given input.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-style Directive</ title >
< script src =
</ script >
< style type = "text/css" >
.bg-color {
background-color: pink;
padding: 10px;
font-size: 18px;
}
</ style >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-style Directive</ h2 >
< div ng-controller = "controllerName" >
Input:
< input type = "text"
ng-model = "color"
placeholder = "Enter any color." />
< p ng-repeat = "i in sort"
ng-style = "{color:color}" >
< span class = "bg-color" >
Name: {{i.name}}
</ span >
</ p >
</ div >
< script >
var app = angular.module("app", []);
app.controller('controllerName',
['$scope', function($scope) {
$scope.sort = [{
name: 'Merge sort'
}, {
name: 'Quick sort'
}, {
name: 'Radix sort'
}];
}]);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...