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:

html[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:

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

Ejemplo

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

Apliquemos esta propiedad como valor para el estilo:

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

Ejemplo

Supongamos que tenemos una propiedad booleana:

app/app.component.tsexport 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:

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

Tareas prácticas