Para diseñar el elemento host del componente, use la directiva ng-style. Las propiedades CSS ayudan en el estilo del componente.
Enfoque: el estilo de los componentes del host utiliza propiedades CSS, que se pueden alterar, modificar y actualizar cuando sea necesario.
Las propiedades CSS se enumeran de la siguiente manera:
- color: se utiliza para establecer el color de la fuente.
- color de fondo: se utiliza para establecer el color de fondo.
- font-size: se utiliza para establecer el tamaño de la fuente.
- relleno: se utiliza para establecer el espacio alrededor del texto.
Sintaxis:
<element ng-style="property"></element>
Ejemplo 1: este ejemplo usa la directiva de estilo ng. Aquí se utilizan las propiedades CSS de color de fuente y color de fondo.
<!DOCTYPE html>
<html>
<head>
<h1><center>Geeks for Geeks</center></h1></head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Producción:
Ejemplo 2: Este ejemplo muestra el estilo de los componentes según el tamaño de fuente, el color de fuente y el color de fondo.
<!DOCTYPE html>
<html>
<head>
<h1><center>Geeks for Geeks</center></h1></head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Producción:
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA