Binding delle classi CSS in Angular

In Angular è possibile attivare e disattivare l'applicazione di una classe CSS per un blocco. Questo viene fatto utilizzando un attributo del tag, scritto nel seguente formato:

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

Vediamo in pratica. Supponiamo di avere le seguenti classi:

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

.bold {
  font-weight: bold;
}

Vediamo con esempi come attivare e disattivare queste classi per un blocco.

Esempio

Attiviamo una classe e disattiviamone un'altra:

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

Esempio

Supponiamo che gli stati delle classi siano memorizzati nelle proprietà della classe:

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

Leghiamo la visibilità della classe in base ai valori delle nostre proprietà:

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

Compiti pratici

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