Skip to content
Related Articles

Related Articles

Improve Article

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=
  </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=
  </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>

Output:

Browser Support: Listed browsers support ng-class with ng-style

  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :