How to combine ng-class with ng-style?

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:

javascript

 
<!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:

javascript

<!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>

Output:

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

Internet Explorer
Firefox
Google Chrome
Opera
Safari

How to combine ng-class with ng-style?

Explore