如何在AngularJS中设置组件的宿主元素的样式？

要设置组件的宿主元素的样式，请使用ng-style指令。 CSS属性有助于组件的样式。

方法：主机组件的样式使用CSS属性，可以在需要时进行更改，修改和更新。

CSS属性列出如下：

• color：用于设置字体颜色。
• background-color：用于设置背景色。
• font-size：用于设置字体大小。
• 填充：用于在文本周围设置空格。

句法：

示例1：此示例使用ng-style指令。此处使用字体颜色和背景颜色的CSS属性。

  

    Geeks for Geeks
  

  
  

  
    GFG
    Portal
  
    
        var app = angular.module("gfg", []);
        app.controller("gfgctrl", function($scope) {
            $scope.ele = {
                "color": "white",
                "background-color": "green",
  
            }
        });
    
  

  

输出：

示例2：此示例显示基于字体大小，字体颜色和背景颜色的组件样式。

  

    Geeks for Geeks
  

  
  

  
    GFG
    Portal
  
    
        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",
            }
        });
    
  

  

输出：