angularjsHow can I use ng-style in AngularJS?

Ng-style is an AngularJS directive used to dynamically set the style of an HTML element. It is used to set a single or multiple CSS properties for the selected element.

Example code

<div ng-style="{'background-color':'#f8f8f8', 'color':'black'}">
    This div has a background color of #f8f8f8 and text color of black.
</div>

Output example

This div has a background color of #f8f8f8 and text color of black.

Code explanation

• ng-style: This is the directive which is used to set the style of the HTML element.
• {'background-color':'#f8f8f8', 'color':'black'}: This is an object containing the properties and values to be set for the element.
• background-color and color: These are the properties which are set for the element.
• #f8f8f8 and black: These are the values which are set for the properties.

Helpful links

• AngularJS ng-style Directive
• Using ng-style to Set CSS Styles in AngularJS

Edit this code on GitHub