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.
Output:
- Before clicking the button:
👁 Image
- After clicking the button:
👁 Image
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.
Output:
- Before pressing the button:
👁 Image
- After pressing the button:
👁 Image
