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:
- Routing in Angular JS using Angular UI Router
- Angular CLI | Angular Project Setup
- Angular 7 | Angular Data Services using Observable
- Adding Angular Material Component to Angular Application
- Difference between Angular 4 and Angular 5
- HTML | Color Styles and HSL
- How to reset/remove CSS styles for element ?
- How to use SASS to create new set of color styles in Bootstrap 4 ?
- How to get all CSS styles associated with an element using jQuery ?
- HTML5 | <footer> Tag
- HTML | DOM Footer Object
- HTML Course | Building Footer
- How to create footer to stay at the bottom of a Web page?
- How to align buttons in Card footer in Bootstrap ?
- How to add footer for a document or section using HTML5 ?
- Materialize CSS | Footer
- How to group footer content in form of table using HTML ?
- PHP append one array to another
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.