Skip to content
Related Articles

Related Articles

Improve Article

How to style the host element of the component in AngularJS?

  • Last Updated : 30 Jan, 2020

To style the host element of the component, use ng-style directive. CSS properties help in the styling of the component.

Approach: Styling of host components uses CSS properties, which can be altered, modified and updated whenever needed.

The CSS properties are listed as follows:

  • color: Used to set font color.
  • background-color: Used to set background color.
  • font-size: Used to set size of font.
  • padding: Used to set space around the text.

Syntax:

<element ng-style="property"></element>

Example 1: This example uses ng-style directive. CSS properties of font color and background color are used here.






<!DOCTYPE html>
<html>
  
<head>
    <h1><center>Geeks for Geeks</center></h1></head>
  
<script src=
  </script>
  
<body ng-app="gfg" ng-controller="gfgctrl">
  
    <h1 ng-style="ele">GFG</h1>
    <h2 ng-style="ele">Portal</h2>
  
    <script>
        var app = angular.module("gfg", []);
        app.controller("gfgctrl", function($scope) {
            $scope.ele = {
                "color": "white",
                "background-color": "green",
  
            }
        });
    </script>
  
</body>
  
</html>

Output:

Example 2: This example shows the styling of components based on font-size, font-color and background color.




<!DOCTYPE html>
<html>
  
<head>
    <h1><center>Geeks for Geeks</center></h1></head>
  
<script src=
  </script>
  
<body ng-app="gfg" ng-controller="gfgctrl">
  
    <h1 ng-style="ele">GFG</h1>
    <h2 ng-style="ele1">Portal</h2>
  
    <script>
        var app = angular.module("gfg", []);
        app.controller("gfgctrl", function($scope) {
            $scope.ele = {
                "color": "white",
                "background-color": "green",
                "font-size": "120px",
            }
            $scope.ele1 = {
                "color": "white",
                "background-color": "green",
                "font-size": "20px",
            }
        });
    </script>
  
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :