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.

<!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.

<!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> 