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 AngularJS ng-switch Directive The ng-switch Directive in AngularJS is used to specify the condition to show/hide the child elements in HTML DOM. The HTML element will be displayed only if the expression inside the ng-switch directive returns true otherwise it will be hidden. It is supported by all HTML elements. Syntax: <elem 2 min read AngularJS ng-show Directive The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> C 2 min read AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read AngularJS ng-pattern Directive The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-patter 2 min read AngularJS ng-transclude Directive The ng-transclude directive is used to mark the insertion point for transcluded DOM of the nearest parent that uses transclusion. Use transclusion slot name as the value of ng-transclude or ng-transclude-slot attribute. If the transcluded content has more than one DOM node with the whitespace text n 3 min read Like