Bindning av CSS-klasser i Angular

I Angular kan man aktivera och inaktivera tillämpning av CSS-klasser för ett block. Detta görs med hjälp av ett taggattribut, skrivet i följande format:

html[class.klassnamn]="true eller false"

Låt oss se på praktiken. Låt oss säga att vi har följande klasser:

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

.bold {
  font-weight: bold;
}

Låt oss se med exempel hur man aktiverar och inaktiverar dessa klasser för ett block.

Exempel

Låt oss aktivera en klass och inaktivera en annan:

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

Exempel

Låt klassernas tillstånd lagras i klassens egenskaper:

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

Låt oss binda klassens synlighet beroende på våra egenskapers värden:

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

Praktiska uppgifter

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