CSS-klassen binding in Angular

In Angular kan het toepassen van een CSS-klasse voor een blok worden in- en uitgeschakeld. Dit wordt gedaan met behulp van een tag-attribuut, geschreven in het volgende formaat:

html[class.klassenaam]="true of false"

Laten we dit in de praktijk bekijken. Stel dat we de volgende klassen hebben:

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

.bold {
  font-weight: bold;
}

Laten we aan de hand van voorbeelden bekijken hoe we deze klassen voor een blok in- en uitschakelen.

Voorbeeld

Laten we één klasse inschakelen en een andere uitschakelen:

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

Voorbeeld

Stel dat de statussen van de klassen zijn opgeslagen in eigenschappen van de klasse:

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

Laten we de zichtbaarheid van de klasse binden afhankelijk van de waarden van onze eigenschappen:

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

Praktische opdrachten

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