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 ক্লাস তৈরি করুন। তাদের মধ্যে একটি ব্লকের ব্যাকগ্রাউন্ড নির্ধারণ করুক, এবং দ্বিতীয়টি - ফন্টের আকার নির্ধারণ করুক।

দুটি বাটন তৈরি করুন। প্রথম বাটনে ক্লিক করলে প্রথম ক্লাস টগল হোক, এবং দ্বিতীয়টিতে ক্লিক করলে - দ্বিতীয় ক্লাস টগল হোক।