AngularJS ng-style Directive

The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. 

Syntax:

<element ng-style="expression"> 
 Content ... 
</element>

Parameter:

• expression: It represents the return type of the expression will be an object, in the form of key: value pair, where the key denotes the CSS properties & the value denotes the respective value assigned to it.

Example: This example illustrates the basic implementation of the AngularJS ng-style Directive.

Output:

Example: This example illustrates the implementation of the ng-style Directive by changing the styles for the given input.

Output: