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:

[class.klassenaam]="true of false"

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

.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:

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

Voorbeeld

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

export 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:

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

Praktische opdrachten

Gegeven de volgende CSS-klasse:

.hidden {
	visibility: hidden;
}

Bind deze klasse aan het blok. Maak een knop waarmee het blok kan worden verborgen of getoond.