Angular-এ অ্যাট্রিবিউট ডিরেক্টিভস ব্যবহৃত হয় HTML এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করার জন্য। এই ধরনের ডিরেক্টিভস, যেমন ngClass এবং ngStyle, কোন HTML অ্যাট্রিবিউট পরিবর্তন করে এবং এর মাধ্যমে UI কে ডায়নামিকভাবে কাস্টমাইজ করা যায়।
ngClass
ngClass ডিরেক্টিভটি একটি HTML এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি একাধিক ক্লাস অ্যাড বা রিমুভ করতে পারেন, অথবা কোনো শর্তের ভিত্তিতে ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে পারেন।
ব্যবহার
ngClass সাধারণত একটি অবজেক্ট, অ্যারে, বা স্ট্রিং হিসেবে কাজ করে। শর্তসাপেক্ষে এক বা একাধিক CSS ক্লাস অ্যাড করতে পারবেন।
উদাহরণ
স্ট্রিং ব্যবহার করে:
<div [ngClass]="'highlight'">This text will be highlighted</div>এখানে,
highlightক্লাসটি সরাসরিdivট্যাগে অ্যাড করা হবে।অবজেক্ট ব্যবহার করে:
<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">Styled text</div>এখানে,
isHighlightedএবংisBoldযদিtrueহয়, তাহলেhighlightএবংboldক্লাসগুলি যোগ করা হবে।falseথাকলে তা রিমুভ করা হবে।অ্যারে ব্যবহার করে:
<div [ngClass]="['highlight', isBold ? 'bold' : '']">Text with dynamic classes</div>এখানে,
highlightক্লাসটি সব সময় যোগ হবে, এবংisBoldযদিtrueহয়, তাহলেboldক্লাসটি যোগ হবে।
কোড উদাহরণ:
<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">
This is a dynamically styled text.
</div>
export class AppComponent {
isHighlighted = true;
isBold = false;
}
এই উদাহরণে, highlight ক্লাসটি isHighlighted এর ভিত্তিতে যোগ হবে, এবং bold ক্লাসটি isBold এর ভিত্তিতে যোগ বা রিমুভ হবে।
ngStyle
ngStyle ডিরেক্টিভটি HTML এলিমেন্টের ইনলাইন স্টাইল পরিবর্তন করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি CSS প্রোপার্টি যেমন color, background-color, font-size, ইত্যাদি ডায়নামিকভাবে পরিবর্তন করতে পারেন।
ব্যবহার
ngStyle একটি অবজেক্ট হিসেবে কাজ করে যেখানে CSS প্রোপার্টির নাম এবং তাদের মান নির্ধারণ করা থাকে।
উদাহরণ
স্টাইল অবজেক্ট ব্যবহার করে:
<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>এখানে,
colorএবংfont-sizeস্টাইল প্রোপার্টি ডায়নামিকভাবে পরিবর্তিত হবে কম্পোনেন্টের ডেটার উপর ভিত্তি করে।ডাইনামিক স্টাইল পরিবর্তন:
<div [ngStyle]="{ 'background-color': isActive ? 'green' : 'red' }"> This div's background color will change based on 'isActive'. </div>এখানে,
isActiveযদিtrueহয়,greenব্যাকগ্রাউন্ড রঙ হবে; আরfalseহলেredহবে।
কোড উদাহরণ:
<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">
This is a styled text.
</div>
export class AppComponent {
textColor = 'blue';
fontSize = 20;
}
এখানে, textColor এবং fontSize ডাইনামিকভাবে পরিবর্তিত হবে, এবং স্টাইলের প্রোপার্টি হিসেবে color এবং font-size অ্যাপ্লাই করা হবে।
ngClass এবং ngStyle এর মধ্যে পার্থক্য
- ngClass CSS ক্লাসগুলিকে অ্যাড বা রিমুভ করে, যেটি স্টাইলিংয়ের জন্য ব্যবহৃত হয়। এটি ক্লাসের পরিবর্তন করে তবে প্রপার্টি মান পরিবর্তন করে না।
- ngStyle সরাসরি ইনলাইন CSS প্রোপার্টি মান পরিবর্তন করে, যেমন
color,background-color,font-sizeইত্যাদি।
উপসংহার
ngClass এবং ngStyle Angular এর শক্তিশালী ডিরেক্টিভস, যা UI-এর স্টাইল এবং ক্লাস ডায়নামিকভাবে পরিচালনা করতে সাহায্য করে। ngClass ব্যবহার করে আপনি শর্তসাপেক্ষে একাধিক ক্লাস অ্যাড বা রিমুভ করতে পারেন, আর ngStyle ব্যবহার করে আপনি সরাসরি স্টাইল প্রোপার্টি নিয়ন্ত্রণ করতে পারেন। এই ডিরেক্টিভস Angular অ্যাপ্লিকেশনে ডাইনামিক ইন্টারফেস তৈরি করার জন্য গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।
Read more
