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.
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.
- 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.
- Before pressing the button:
- After pressing the button:
- Angular CLI | Angular Project Setup
- Routing in Angular JS using Angular UI Router
- HTML5 | <footer> Tag
- HTML | Color Styles and HSL
- HTML | DOM Footer Object
- HTML Course | Building Footer
- How to reset/remove CSS styles for element ?
- How to align buttons in Card footer in Bootstrap ?
- How to create footer to stay at the bottom of a Web page?
- Angular 7 | Introduction
- Angular 7 | Installation
- Angular 4 | Introduction
- How to use jQuery in Angular ?
- Angular 7 | Architecture
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.