Massbindning av CSS-klasser i Angular

Med direktivet ngClass kan man slå på och av en uppsättning CSS-klasser i en tagg direkt. Direktivet tar ett objekt som värde, där nycklarna är klasserna och värdena är booleska värden. En klass kommer att varas på om den har satts till värdet true, och av om den är false.

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Låt oss med exempel se hur man slår på och av dessa klasser för ett block.

Exempel

Låt oss slå på en klass och stänga av en annan:

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

Exempel

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

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

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

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Exempel

En egenskap kan innehålla ett helt objekt med klasser och tillstånd:

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

Låt oss binda detta objekt till vårt block:

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

Exempel

Man kan hämta värdena för vårt objekt från andra egenskaper i klassen:

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

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

Låt oss binda detta objekt till vårt block:

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

Praktiska uppgifter

Skapa två CSS-klasser. Låt en av dem definiera blockets bakgrund och den andra - teckenstorleken.

Skapa två knappar. Låt ett klick på den första knappen växlar den första klassen, och ett klick på den andra - växlar den andra klassen.