How to append Angular styles in footer ?

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>

OR



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="myApp">
      
<head>
    <script src=
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <style>
        .gfg {
            background-color: green;
        }
    </style>
  
    <script src=
    </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>

chevron_right


Output:

  • Before pressing the button:
  • After pressing the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.