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 ගුණාංග අගයන් බැඳෙනු ඇත. මේ සඳහා අපි ternary operator භාවිතා කරමු:

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

බ්ලොක් එකක් දී ඇත. පළමු ක්ලික් කිරීම එය රතු පැහැයට හා දෙවන ක්ලික් කිරීම හරිත පැහැයට තීන්ත ආලේප කරන පරිදි සකසන්න.

බ්ලොක් එකක් දී ඇත. බොත්තමක් දී ඇත. බොත්තම එබීමෙන් බ්ලොක් එකේ පළල දෙගුණයකින් වැඩි කරන පරිදි සකසන්න.