Angular හි CSS විලාසිකාවන් බැඳීම

Angular හිදී, අංගයකට සෘජුවම විලාසිකාවන් එක් කළ හැකිය. මෙය සිදු කරනුයේ පහත ආකෘතියෙන් ලියන ලද ටැග් ගුණාංගයක් භාවිතයෙන්:

html[style.styleProperty]="property value"

මෙම අවස්ථාවේදී, තුළ ඉඩ කඩ ඇති CSS ගුණාංගවල නම්, අපගේ නඩුවේ camelCase වලින් ලියනු ලැබේ. එය ක්‍රියා කරන ආකාරය උදාහරණ මගින් බලමු.

උදාහරණය

අංගයකට පසුබිමක් සකසමු:

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

උදාහරණය

අප සතුව පසුබිම් වර්ණය අඩංගු යම් ගුණාංගයක් ඇතැයි සිතමු:

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

විලාසිකාවක් සඳහා අගයක් ලෙස මෙම ගුණාංගය ප්‍රයෝග කරමු:

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

උදාහරණය

අප සතුව යම් බූලියන් ගුණාංගයක් ඇතැයි සිතමු:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

බූලියන් ගුණාංගයේ අන්තර්ගතය මත පදනම්ව විවිධ CSS ගුණාංග අගයන් බැඳෙනු ඇත. මේ සඳහා අපි ternary operator භාවිතා කරමු:

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

ප්‍රායෝගික කාර්යයන්