How to combine ng-class with ng-style?

Last Updated : 31 Jul, 2019

The style attribute is set using ng-style. The value of ng-style is an object, which is used to refer to CSS style, which is applied to the element.

Syntax:

<element ng-style="object">..</element>

Properties:
Object: Object is used to return css style applied to the element.

Return Value: It returns the style applied to the ng-class elements.

Example 1:

   
<!DOCTYPE html> 
<html> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
  </script> 
  
<body ng-app="gfg" 
      ng-controller="geekctrl"> 
  
    <h1 ng-style="geekstyle"> 
      GeeksforGeeks 
  </h1> 
  
    <script> 
        var app = angular.module("gfg", []); 
        app.controller( 
          "geekctrl", function($scope) { 
            $scope.geekstyle = { 
                "color": "white", 
                "background-color": "green", 
                "font-size": "80px", 
  
            } 
        }); 
    </script> 
  
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE html> 
<html> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
  </script> 
  
<body ng-app="gfg" 
      ng-controller="geekctrl"> 
  
    <h1 ng-style="geekstyle"> 
      GeeksforGeeks 
  </h1> 
    <h2 ng-style="geekstyle1"> 
      GeeksforGeeks 
  </h2> 
    <script> 
        var app = angular.module("gfg", []); 
        app.controller("geekctrl", function($scope) { 
            $scope.geekstyle = { 
                "color": "white", 
                "background-color": "green", 
                "font-size": "60px", 
  
            } 
            $scope.geekstyle1 = { 
                "color": "white", 
                "background-color": "green", 
                "font-size": "80px", 
  
            } 
        }); 
    </script> 
  
</body> 
  
</html> 