AngularJS ng-style Directive Last Updated : 03 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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">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= "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">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: Comment More infoAdvertise with us Next Article AngularJS ng-style Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-paste Directive The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS | ng-selected Directive The ng-selected Directive in AngularJS is used to specify the selected attribute of an HTML element. It can be used to select the default value specified on an HTML element. If the expression inside the ng-selected directive returns true then the selected option value will be displayed otherwise not 1 min read AngularJS ng-srcset Directive The ng-srcset Directive in AngularJS is used to specify the srcset attribute of an <img> element, ie, overriding the original srcset attribute of an <img> element. It helps to ensure that the wrong image is not produced until AngularJS has been evaluated. This directive must be used inst 2 min read Like