Μαζική δέσμευση κλάσεων CSS στο Angular

Με την οδηγία ngClass μπορούμε να ενεργοποιούμε και να απενεργοποιούμε σε μια ετικέτα αμέσως ένα σύνολο από κλάσεις CSS. Η οδηγία δέχεται ως τιμή ένα αντικείμενο, του οποίου τα κλειδιά θα είναι οι κλάσεις, και οι τιμές - λογικές τιμές. Η κλάση θα ενεργοποιηθεί εάν για αυτήν οριστεί η τιμή true, και θα απενεργοποιηθεί, εάν false.

Ας δούμε στην πράξη. Ας υποθέσουμε ότι έχουμε τις ακόλουθες κλάσεις:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Ας δούμε με παραδείγματα, πώς να ενεργοποιούμε και να απενεργοποιούμε αυτές τις κλάσεις για ένα μπλοκ.

Παράδειγμα

Ας ενεργοποιήσουμε μια κλάση και ας απενεργοποιήσουμε μια άλλη:

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

Παράδειγμα

Ας υποθέσουμε ότι οι καταστάσεις των κλάσεων αποθηκεύονται σε ιδιότητες της κλάσης:

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

Ας δέσμευουμε την ορατότητα της κλάσης ανάλογα από τις τιμές των ιδιοτήτων μας:

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

Παράδειγμα

Σε μια ιδιότητα μπορεί να είναι ένα ολόκληρο αντικείμενο με κλάσεις και καταστάσεις:

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

Ας δέσμευουμε αυτό το αντικείμενο στο μπλοκ μας:

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

Παράδειγμα

Μπορούμε οι τιμές για το αντικείμενό μας να ληφθούν από άλλες ιδιότητες της κλάσης:

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

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

Ας δέσμευουμε αυτό το αντικείμενο στο μπλοκ μας:

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

Πρακτικές ασκήσεις

Δημιουργήστε δύο κλάσεις CSS. Ας ορίζει η μια από αυτές το φόντο του μπλοκ, και η δεύτερη - το μέγεθος της γραμματοσειράς.

Φτιάξτε δύο κουμπιά. Ας πατώντας στο πρώτο κουμπί να εναλλάσσει την πρώτη κλάση, και πατώντας στο δεύτερο - να εναλλάσσει τη δεύτερη κλάση.