Angular में CSS क्लासेस का बल्क बाइंडिंग

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 क्लासेस बनाएं। उनमें से एक ब्लॉक की बैकग्राउंड को परिभाषित करे, और दूसरी फ़ॉन्ट का आकार तय करे।

दो बटन बनाएं। पहले बटन को दबाने पर पहली क्लास टॉगल हो, और दूसरे बटन को दबाने पर दूसरी क्लास टॉगल हो।