Angular-এ CSS স্টাইল বাইন্ডিং

Angular-এ সরাসরি ব্লকের জন্য স্টাইল যোগ করা যায়। এটি ট্যাগের একটি অ্যাট্রিবিউট ব্যবহার করে নিম্নলিখিত ফরম্যাটে লেখা হয়:

[style.styleProperty]="property value"

এক্ষেত্রে, CSS প্রপার্টির নাম যেগুলোর মধ্যে হাইফেন থাকে, সেগুলো আমাদের ক্ষেত্রে camelCase-এ লেখা হবে। চলুন উদাহরণের মাধ্যমে দেখি কিভাবে এটি কাজ করে।

উদাহরণ

এলিমেন্টের ব্যাকগ্রাউন্ড সেট করা যাক:

<div [style.backgroundColor]="'blue'">
	text
</div>

ধরুন আমাদের কাছে একটি প্রপার্টি আছে, যাতে ব্যাকগ্রাউন্ড রঙ রয়েছে:

export class AppComponent {
	public value: string = 'red';
}

স্টাইলের মান হিসেবে এই প্রপার্টিটি প্রয়োগ করা যাক:

<div [style.backgroundColor]="value">
	text
</div>

ধরুন আমাদের কাছে একটি বুলিয়ান প্রপার্টি আছে:

export class AppComponent {
	public isActive: boolean = true;
}

বুলিয়ান প্রপার্টির বিষয়বস্তুর উপর নির্ভর করে বিভিন্ন মান CSS প্রপার্টিতে বাইন্ড করা হবে। এর জন্য টারনারি অপারেটর ব্যবহার করা যাক:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

একটি ব্লক দেওয়া আছে। এমন করুন যাতে ব্লকে প্রথম ক্লিক এটিকে লাল রঙ করে, এবং দ্বিতীয় ক্লিক - সবুজ রঙ করে।

একটি ব্লক দেওয়া আছে। একটি বাটন দেওয়া আছে। এমন করুন যাতে বাটনে ক্লিক করলে ব্লকের প্রস্থ দুই গুণ বেড়ে যায়।