Vinculación de estilos CSS en Angular

En Angular también es posible añadir estilos directamente para un bloque. Esto se hace usando un atributo de etiqueta, escrito en el siguiente formato:

[style.propiedadDeEstilo]="valor de la propiedad"

Al mismo tiempo, los nombres de las propiedades CSS que tienen un guión dentro, en nuestro caso se escribirán en camelCase. Veamos con ejemplos cómo funciona esto.

Ejemplo

Establezcamos el fondo para un elemento:

<div [style.backgroundColor]="'blue'">
	texto
</div>

Ejemplo

Supongamos que tenemos una propiedad que contiene el color de fondo:

export class AppComponent {
	public value: string = 'red';
}

Apliquemos esta propiedad como valor para el estilo:

<div [style.backgroundColor]="value">
	texto
</div>

Ejemplo

Supongamos que tenemos una propiedad booleana:

export class AppComponent {
	public isActive: boolean = true;
}

Vinculemos diferentes valores a la propiedad CSS dependiendo del contenido de la propiedad booleana. Usemos para esto el operador ternario:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	texto
</div>

Tareas prácticas

Se da un bloque. Haz que el primer clic en el bloque lo pinte de color rojo, y el segundo clic - de verde.

Se da un bloque. Se da un botón. Haz que al pulsar el botón se duplique el ancho del bloque.