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=
"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>