Massale binding van CSS klassen in Angular

Met de directive ngClass kan men een set CSS klassen in een tag in- en uitschakelen. De directive accepteert als waarde een object, waarvan de sleutels de klassen zijn, en de waarden - booleaanse waarden. Een klasse wordt ingeschakeld als de waarde ervan is ingesteld op true, en uitgeschakeld als 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 [ngClass]="{blue: true, 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 [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Voorbeeld

De eigenschap kan een heel object bevatten met klassen en statussen:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Laten we dit object aan ons blok binden:

<div [ngClass]="styles">
	text
</div>

Voorbeeld

Men kan de waarden voor ons object verkrijgen uit andere eigenschappen van de klasse:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Laten we dit object aan ons blok binden:

<div [ngClass]="styles">
	text
</div>

Praktische opdrachten

Maak twee CSS klassen aan. Laat één van hen de achtergrond van het blok bepalen, en de tweede - de grootte van het lettertype.

Maak twee knoppen. Laat een klik op de eerste knop de eerste klasse toggle, en een klik op de tweede - de tweede klasse toggle.