AngularJS ng-Style Directive

The AngularJS ng-style directive is used to set CSS style on an HTML element conditionally.

Syntax

<span style="font-family:Arial;padding:3px;width:350px;" 
ng-style="myStyle">https://www.techstrikers.com</span>
</form>

AngularJS ng-Style Directive Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>ngStyle Test Sample</title> 
  <style>
    span {
      color: green;
    }
  </style>
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    

</head>    
<body style="background-color:#DDE4E9;" ng-app="">    
  <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngStyle Example</legend>
    <br/>
<span style="font-family:Arial;padding:3px;width:350px;" ng-style="myStyle">https://www.techstrikers.com</span>
   <br/><br/>
<input type="button" value="Set Color" ng-click="myStyle={color:'red'}">
<input type="button" value="Set Background Color" ng-click="myStyle={'background-color':'yellow'}">
<input type="button" value="Clear" ng-click="myStyle={}">
    
 </fieldset>     
</body>    
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Style Directive

AngularJS ng-Style Directive Example

Recent Articles