How to append Angular styles in footer ?

Last Updated : 08 Nov, 2019

To append CSS styles to footer or any HTML element with angularJS, we can either use ng-class directive if we have a predefined CSS class, or ng-style directive if we want to dynamically create styles in runtime. Syntax:

<footer ng-style="jsObject">...</footer>

<footer ng-class="jsObject/Array/String">...</footer>

In the ng-style directive, the jsObject contains the CSS key-value pairs. In the ng-class directive, the expression can be a jsObject, Array or String. Here the jsObject is a key-value pair mapping of a CSS class name and a boolean, String is just the name of CSS class while Arrays can be both. Example 1: In this example, we use ng-style directive to append styles to footer element.

html

<!DOCTYPE html>
<html ng-app="myApp">
    
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-controller="MyController">
    <button type="button"
        ng-click="click(this)">GFG
    </button>

    <!-- ng-style to append styles on footer -->
    <footer ng-style="styleObj">
        <hr>
        <h1>GeeksForGeeks!</h1>
    </footer>
    
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);

        myApp.controller('MyController', [
            '$scope', function($scope) {
                $scope.styleObj = {
                    "color": "green"
                }

                $scope.click = function($scope) {
                
                    // CSS key value pairs to append new
                    // style of background-color
                    $scope.styleObj["background-color"] = "green";
                    
                    // Modifying existing style
                    $scope.styleObj["color"] = "black";
                }
            }
        ]);
    </script>
</body>

</html>

Output:

Before clicking the button:
After clicking the button:

When we press the button GFG, it will call the click function. The click function then changes the value of styleObj by giving it a new property and modifying the existing one. Example 2: In this example, we use ng-class directive with an object to append styles to the footer element.

html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <style>
        .gfg {
            background-color: green;
        }
    </style>

    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-controller="MyController">
    <button type="button" ng-click="click(this)">
        GFG
    </button>

    <footer ng-class="clsObj">
        <hr>
        <h1>GeeksForGeeks!</h1>
    </footer>

    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
    
        myApp.controller('MyController', [
            '$scope', function($scope) {
                $scope.clsObj = {
                    "gfg": false
                }
    
                $scope.click = function($scope) {
                    $scope.clsObj["gfg"] = true;
                }
            }
        ]);
    </script>
</body>

</html>