AngularJS ng-style Directive
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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </ script > < title >AngularJS ng-style Directive</ title > </ head > < body ng-app = "app" ng-controller = "gfgCtrl" > < h1 ng-style = "gfgData" >w3wiki</ 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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" > </ 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" >w3wiki</ 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: