Vinculación de clases CSS en Angular

En Angular, puedes activar o desactivar la aplicación de una clase CSS para un bloque. Esto se hace usando un atributo de etiqueta, escrito en el siguiente formato:

html[class.nombre_de_la_clase]="true o false"

Veamos en la práctica. Supongamos que tenemos las siguientes clases:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Veamos con ejemplos cómo activar y desactivar estas clases para un bloque.

Ejemplo

Activemos una clase y desactivemos otra:

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  text
</div>

Ejemplo

Supongamos que los estados de las clases se almacenan en propiedades de la clase:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Vinculemos la visibilidad de la clase dependiendo de los valores de nuestras propiedades:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  text
</div>

Tareas prácticas

app/app.component.css.hidden {
  visibility: hidden;
}