La directiva de atributo ngStyle actualiza los estilos para un elemento HTML determinado.
Establece una o más propiedades de estilo, especificadas como pares clave-valor separados por dos puntos. La clave es un nombre de estilo y el valor es una expresión a evaluar o valor a asignar.
Si indicamos directamente el valor a asignar tenemos la siguiente sintaxis:
<h1 [ngStyle]="{'color':'red','background-color':'#ff0','text-align':'center'}">Sitio fuera de servicio</h1>
En el ejemplo vemos que si asignamos valores no presenta ninguna ventaja que definir la propiedad 'style' de HTML:
<h1 style="color:red;background-color:#ff0;text-align:center">Sitio fuera de servicio</h1>
Pero cuando utilizamos la directiva de atributo ngStyle podemos indicar una expresión en la zona del valor, por ejemplo si tenemos definida la variable en la clase:
colorEstado='#f00';
Luego en la vista accedemos a dicha variable:
<h1 [ngStyle]="{'color':colorEstado}">Sitio fuera de servicio</h1>
Estamos indicando que para el atributo 'color' debe tomar el valor almacenado en la variable colorEstado, es importante notar que no debe ir entre comillas la variable.
Podemos llamar a un método en el lugar de la expresión, si tenemos definido en el modelo el método:
retornarColor() { return '#00f'; }
Luego cuando definimos la directiva tenemos la sintaxis:
<h1 [ngStyle]="{'color':retornarColor()}">Sitio fuera de servicio</h1>
Por ejemplo si necesitamos que una tabla que muestra los números del 1 al 5, tengan las celdas de colores alternos, lo podemos resolver con la sintaxis:
<table> <tr *ngFor="let elemento of [1,2,3,4,5]"> <td [ngStyle]="{'background-color':elemento%2==0?'red':'yellow'}">{{elemento}}</td> </tr> </table>
Cada vuelta del for se verifica si el resto de dividir el elemento del array es cero procede a asignar el valor 'red' a la propiedad 'background-color' en caso contrario asigna 'yellow'.
La sintaxis a emplear con unidades de medida se deben indicar como sufijo cuando la definimos:
<p *ngFor="let elemento of [10,12,14,20,30]" [ngStyle]="{'font-size.px':elemento}"> Tamaño de fuente en píxeles: {{elemento}} </p>
Luego tenemos como resultado:
Es decir utilizamos la sintaxis: 'font-size.px'
Otros ejemplos de unidades de medida asignada podrían ser:
Podemos crear en el modelo un objeto literal con distintos estilos, que luego podemos modificar cuando se producen eventos. Para probar esto crearemos un div con una etiqueta y dos botones que modifican el tamaño de la fuente.
En el modelo de la componente definimos 'app.component.ts':
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { tamano=30; presentacion={ "background-color":"black", "color":"white", "width.px":"1000", "height.px":"200", "font-size.px":this.tamano, "display": "flex", "justify-content":"center", "align-items": "center" } agrandar() { this.tamano++; this.presentacion["font-size.px"]=this.tamano; } reducir() { this.tamano--; this.presentacion["font-size.px"]=this.tamano; } }
En la vista tenemos 'app.component.html':
<div [ngStyle]="presentacion">Texto centrado en forma horizontal y vertical.</div> <button (click)="agrandar()">Agrandar</button> <button (click)="reducir()">Reducir</button>
Hemos asignado a la directiva ngStyle la variable 'presentación' que se define en el modelo.
Cuando se presiona alguno de los botones procedemos a actualizar la variable 'presentacion' y podemos ver que el texto se actualiza.
Podemos hacer referencia a una propiedad individual con la sintaxis:
<p [style.color]="'#f00'">Color rojo</p>
Disponemos 'style' y seguidamente el nombre de la propiedad, en este caso 'color'. Son importante las comillas simples dentro de las comillas dobles, estamos indicando que tomo el string '#f00'.
Es más común que enlacemos la directiva con una variable definida en el modelo, por ejemplo si tenemos en el modelo:
colorFondo='#ff0';
Luego en la vista enlazamos esta variable con la sintaxis:
<p [style.background-color]="colorFondo">Color</p>
Confeccionaremos una aplicación que permita modificar el tamaño de la fuente de un texto mediante dos botones.
En el archivo 'app.component.ts' tenemos:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { tamano = 50; agrandar() { this.tamano++; } reducir() { this.tamano--; } }
En el archivo 'app.component.html' tenemos:
<div [style.font-size.px]="tamano">Texto</div> <button (click)="agrandar()">Agrandar</button> <button (click)="reducir()">Reducir</button>
Como vemos si tenemos que trabajar con unidades de medida debemos indicarla en la misma directiva:
<div [style.font-size.px]="tamano">Texto</div>
Debemos usar NgStyle cuando debemos establecer muchos estilos en línea de forma simultánea y dinámica, según el estado del componente, en el caso que solo debemos establecer un único estilo conviene utilizar la sintaxis que acabamos de ver.