Angular Class மற்றும் Style Binding: உங்கள் எலிமெண்ட்களை டைனமிக் ஆக்குதல்

உங்கள் ஆப்பில் என்ன நடக்கிறது என்பதன் அடிப்படையில் எலிமெண்ட்கள் எவ்வாறு தோற்றமளிக்க வேண்டும் என்பதை மாற்ற Angular ஒரு எளிமையான வழியை வழங்குகிறது. இன்றைய தேதி 30 June 2026, மேலும் இன்டராக்டிவ் வெப் அப்ளிகேஷன்களை உருவாக்க Angular ஒரு பிரபலமான தேர்வாக இருப்பதால், class மற்றும் style binding-ஐப் புரிந்துகொள்வது இன்னும் முக்கியமானது—DOM-ஐ நேரடியாகக் கையாள வேண்டிய அவசியமின்றி ரெஸ்பான்சிவ், டைனமிக் பயனர் இடைமுகங்களை (user interfaces) உருவாக்குவதற்கான அடிப்படை நுட்பங்களில் இதுவும் ஒன்றாகும்.

Class binding மற்றும் style binding என்பவை Angular டெம்ப்ளேட்களின் இரண்டு முக்கிய அம்சங்களாகும். இவை சிக்கலான JavaScript எழுதாமல் CSS கிளாஸ்களைச் சேர்க்கவோ அல்லது நீக்கவோ மற்றும் இன்லைன் ஸ்டைல்களைப் பயன்படுத்தவோ உங்களை அனுமதிக்கின்றன. அவை எவ்வாறு செயல்படுகின்றன மற்றும் ஒவ்வொன்றையும் எப்போது பயன்படுத்த வேண்டும் என்பதைப் பார்ப்போம்.

Class Binding என்றால் என்ன?

Class binding என்பது Angular-மிடம் "இந்த நிபந்தனை true ஆக இருந்தால் எலிமெண்ட்டில் இந்த CSS கிளாஸைச் சேர், false ஆக இருந்தால் அதை நீக்கு" என்று சொல்வதற்கான ஒரு வழியாகும். இதை ஒரு லைட் சுவிட்ச் போல நினைத்துப் பாருங்கள்—சுவிட்ச் ஆன் (true) செய்யப்படும்போது, கிளாஸ் பயன்படுத்தப்படும்; அது ஆஃப் (false) செய்யப்படும்போது, கிளாஸ் நீக்கப்படும்.

Angular இந்த வார்த்தையைச் சுற்றி சதுர அடைப்புக்குறிகளைப் (square brackets) பயன்படுத்துகிறது class ஒரு binding-ஐச் சுட்டிக்காட்ட. இந்த சிண்டாக்ஸை நீங்கள் இதற்கு முன் பார்த்ததில்லை என்றால், பிராக்கெட்டுகள் "இது டைனமிக்; மாற்றங்களைக் கவனிக்கவும்" என்பதையே குறிக்கின்றன.

ஒற்றை கிளாஸைப் பைண்ட் செய்தல்

ஒரு பட்டன் ஆக்டிவ் ஆக இருக்கும்போது வேறுவிதமாகத் தோற்றமளிக்க வேண்டும் என்று வைத்துக்கொள்வோம். நீங்கள் இவ்வாறு எழுதலாம்:

<div [class.active]="isActive">Click me</div>

உங்கள் காம்பொனென்ட்டில், உங்களிடம் ஒரு வேரியபிள் இருக்கும்:

export class MyComponent {
  isActive = true;
}

எப்போது isActive true ஆக இருக்கிறதோ, அப்போது active கிளாஸ் div-இல் சேர்க்கப்படும். அது false ஆக இருக்கும்போது, கிளாஸ் நீக்கப்படும். அவ்வளவுதான். Angular மாற்றங்களைக் கவனித்து DOM-ஐத் தானாகவே அப்டேட் செய்கிறது.

பல கிளாஸ்களைப் பைண்ட் செய்தல்

இப்போது நீங்கள் ஒரே நேரத்தில் பல கிளாஸ்களைப் பயன்படுத்த வேண்டும் என்று கற்பனை செய்து பாருங்கள்—ஒருவேளை active, disabled, மற்றும் highlighted. அவற்றை ஒவ்வொன்றாக எழுதுவது சலிப்பூட்டுவதாக இருக்கும். அதற்குப் பதிலாக, நீங்கள் ஒரு ஆப்ஜெக்ட்டைப் பைண்ட் செய்யலாம்:

<div [class]="{ active: isActive, disabled: isDisabled, highlighted: count > 0 }">
  Content
</div>

ஆப்ஜெக்ட்டில் உள்ள ஒவ்வொரு கீயும் (key) ஒரு கிளாஸ் பெயராகும். ஒவ்வொரு மதிப்பும் (value) Angular மதிப்பீடு செய்யும் ஒரு எக்ஸ்ப்ரெஷன் ஆகும். எக்ஸ்ப்ரெஷன் truthy ஆக இருந்தால் (true, பூஜ்ஜியமற்ற எண், காலியாக இல்லாத ஸ்ட்ரிங்), கிளாஸ் சேர்க்கப்படும். அது falsy ஆக இருந்தால் (false, 0, null, undefined), அது தவிர்க்கப்படும்.

எனவே isActive true ஆகவும் isDisabled false ஆகவும் இருந்தால், உங்கள் எலிமெண்ட்டில் பின்வரும் கிளாஸ்கள் இருக்கும்: active மற்றும் highlighted, ஆனால் இது இருக்காது: disabled.

Style Binding என்றால் என்ன?

Style binding இதேபோல் செயல்படுகிறது, ஆனால் CSS கிளாஸ்களைச் சேர்ப்பதற்கு அல்லது நீக்குவதற்குப் பதிலாக, நீங்கள் நேரடியாக எலிமெண்ட்டில் இன்லைன் ஸ்டைல்களைப் பயன்படுத்துகிறீர்கள். உங்கள் அப்ளிகேஷன் ஸ்டேட்டின் அடிப்படையில் நிறங்கள், அளவுகள், நிலைகள் அல்லது ஏதேனும் CSS பிராப்பர்ட்டியை மாற்ற வேண்டியிருக்கும் போது இது பயனுள்ளதாக இருக்கும்.

ஒற்றை ஸ்டைலைப் பைண்ட் செய்தல்

ஒரு பிராப்பர்ட்டியின் அடிப்படையில் பின்னணி நிறத்தை (background color) மாற்ற விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்:

<div [style.background-color]="backgroundColor">Content</div>

உங்கள் காம்பொனென்ட்டில்:

export class MyComponent {
  backgroundColor = 'lightblue';
}

Angular பயன்படுத்தும்: background-color: lightblue; div-க்கு. நீங்கள் மாற்றி அமைத்தால்: backgroundColor என்பதை 'red' என்று பின்னர் மாற்றினால், div உடனடி அப்டேட் ஆகும்.

பிராப்பர்ட்டி பெயர் டாஷ் (background-color) என்பதைப் பயன்படுத்துகிறது என்பதைக் கவனிக்கவும். CSS-இல் நீங்கள் அதை அப்படித்தான் எழுதுவீர்கள். CSS பெயர்கள் மற்றும் camelCase பதிப்புகள் இரண்டையும் கையாளும் அளவுக்கு Angular திறமையானது, எனவே [style.backgroundColor] என்பதும் வேலை செய்யும்.

பல ஸ்டைல்களைப் பைண்ட் செய்தல்

கிளாஸ்களைப் போலவே, ஒரு ஆப்ஜெக்ட் மூலம் ஒரே நேரத்தில் பல ஸ்டைல்களைப் பைண்ட் செய்யலாம்:

<div [style]="{ backgroundColor: bgColor, fontSize: size + 'px', color: textColor }">
  Content
</div>

இங்கே, நீங்கள் மூன்று பிராப்பர்ட்டிகளை அமைக்கிறீர்கள்: background color, font size, மற்றும் text color. size + 'px' சரியான CSS மதிப்புகளை உருவாக்க வேரியபிள்களை ஸ்ட்ரிங்குகளுடன் இணைக்க முடியும் என்பதை இது காட்டுகிறது.

Class Binding vs. Style Binding-ஐ எப்போது பயன்படுத்த வேண்டும்

நான் கிளாஸ்களைப் பயன்படுத்த வேண்டுமா அல்லது இன்லைன் ஸ்டைல்களைப் பயன்படுத்த வேண்டுமா? என்று நீங்கள் யோசிக்கலாம். இதோ ஒரு விரைவான வழிகாட்டி:

கிளாஸ்களைப் பயன்படுத்துங்கள் உங்கள் CSS கோப்பில் முன்வரையறுக்கப்பட்ட ஸ்டைல்கள் இருக்கும்போது. கிளாஸ்கள் பராமரிக்க எளிதானவை, மீண்டும் பயன்படுத்தக்கூடியவை மற்றும் உங்கள் HTML-ஐத் தெளிவாக வைத்திருக்கும். உங்களிடம் ஒரு .active ஐந்து வெவ்வேறு பிராப்பர்ட்டிகளுடன் (color, border, padding, முதலியன) கூடிய கிளாஸ் இருந்தால், அந்த கிளாஸைப் பைண்ட் செய்வது ஒவ்வொரு பிராப்பர்ட்டியையும் தனித்தனியாக பைண்ட் செய்வதை விட மிகவும் நேர்த்தியானது.

Style binding-ஐப் பயன்படுத்துங்கள் டைனமிக்காக மாறும் மற்றும் முன்வரையறுக்கப்பட்ட கிளாஸில் சரியாகப் பொருந்தாத ஒரு மதிப்பை நீங்கள் பயன்படுத்த வேண்டியிருக்கும் போது. உதாரணமாக, ஸ்லைடர் உள்ளீட்டின் (slider input) அடிப்படையில் அகலத்தை (width) அமைக்கிறீர்கள் என்றால் அல்லது கலர் பிக்கரிலிருந்து (color picker) நிறத்தை மாற்றுகிறீர்கள் என்றால், இன்லைன் ஸ்டைல்கள் தான் சரியான வழி.

ஒரு நடைமுறை உதாரணம்: புரோகிரெஸ் பார்

நாம் கற்றுக்கொண்டவற்றை இணைப்போம். நீங்கள் ஒரு புரோகிரெஸ் பாரை உருவாக்குகிறீர்கள் என்று கற்பனை செய்து பாருங்கள்:

<div class="progress-container">
  <div 
    class="progress-bar" 
    [style.width]="progressPercent + '%'"
    [class.complete]="progressPercent === 100"
    [class.warning]="progressPercent > 75 && progressPercent < 100"
  ></div>
</div>

உங்கள் காம்பொனென்ட்டில்:

export class ProgressComponent {
  progressPercent = 45;
}

இங்கே, அகலம் (width) progressPercent மதிப்புடன் டைனமிக்காக மாறுகிறது. புரோகிரெஸ் 100%-ஐ அடையும் போது, complete கிளாஸ் சேர்க்கப்படும் (ஒருவேளை அது பச்சையாக மாறலாம்). அது 75%-க்கு மேல் சென்றால், warning கிளாஸ் சேர்க்கப்படும் (ஒருவேளை அது மஞ்சளாக மாறலாம்). progressPercent மாறும்போதெல்லாம் அனைத்து அப்டேட்களையும் Angular கையாள்கிறது.

சில முக்கியமான விவரங்கள்

ஸ்டைல்களைப் பைண்ட் செய்யும்போது, டாஷ்களைக் கொண்ட CSS பிராப்பர்ட்டி பெயர்கள் ( background-colorபோன்றவை) JavaScript-இல் கவனமாகக் கையாளப்பட வேண்டும் என்பதை நினைவில் கொள்க. Angular இரண்டையும் ஏற்கிறது:

• [style.background-color]="value" (CSS ஸ்டைல்)
• [style.backgroundColor]="value" (camelCase, JavaScript ஸ்டைல்)

கிளாஸ்கள் மற்றும் ஸ்டைல்களுக்கு, காம்பொனென்ட் லோட் ஆகும்போதும், எக்ஸ்ப்ரெஷனில் உள்ள ஏதேனும் வேரியபிள் மாறும்போதெல்லாம் Angular எக்ஸ்ப்ரெஷனை மதிப்பீடு செய்கிறது. இது சேஞ்ச் டிடெக்ஷன் (change detection) என்று அழைக்கப்படுகிறது, மேலும் இதன் மூலமே Angular உங்கள் UI-ஐ உங்கள் தரவுடன் ஒத்திசைவில் வைத்திருக்கின்றது.

நீங்கள் ஸ்டேடிக் கிளாஸ்கள் மற்றும் ஸ்டைல்களுடன் class அல்லது style binding-களையும் இணைக்கலாம்:

<div class="static-class" [class.dynamic-class]="isDynamic" style="padding: 10px;" [style.background]="bgColor">
  Content
</div>

ஸ்டேடிக் மற்றும் டைனமிக் ஸ்டைல்கள் இரண்டும் ஒன்றாகப் பயன்படுகின்றன.

முடிவுரை

Angular-இன் class மற்றும் style binding ஆகியவை ரெஸ்பான்சிவ், டைனமிக் பயனர் இடைமுகங்களை உருவாக்குவதை எளிதாக்குகின்றன. கிளாஸ்களைக் கைமுறையாகச் சேர்க்க அல்லது நீக்க அல்லது ஸ்டைல்களை மாற்ற JavaScript எழுதுவதற்குப் பதிலாக, உங்கள் தரவை உங்கள் டெம்ப்ளேட்டுடன் பைண்ட் செய்தால் போதும். Angular மாற்றங்களைக் கவனித்து உங்களுக்காக DOM-ஐ அப்டேட் செய்கிறது. நேரடி DOM கையாளுதலின் சிக்கலான தன்மை இல்லாமல் இன்டராக்டிவ் UI-களை உருவாக்க இது ஒரு சக்திவாய்ந்த, நேர்த்தியான வழியாகும்.

நன்மைகள்

• HTML-ஐ செமாண்டிக் ஆகவும் புரிந்துகொள்ளக்கூடியதாகவும் வைத்திருக்க உதவும் சுத்தமான, படிக்கக்கூடிய சிண்டாக்ஸ்
• உங்கள் தரவு மாறும்போது தானியங்கு அப்டேட்கள்—கைமுறை DOM கையாளுதல் தேவையில்லை
• ஸ்டைல்களும் கிளாஸ்களும் காம்பொனென்ட் ஸ்டேட்டுடன் பிணைக்கப்பட்டிருப்பதால் சோதனை செய்வது (test) எளிது
• பொறுப்புகளைப் பிரிக்கிறது: ஸ்டைலிங் CSS-இல் இருக்கும், லாஜிக் TypeScript-இல் இருக்கும்
• ஒற்றை மற்றும் பல கிளாஸ்கள் அல்லது ஸ்டைல்கள் இரண்டிலும் இயங்கும்
• டைனமிக் மதிப்புகள், கணக்கீடுகள் மற்றும் சிக்கலான எக்ஸ்ப்ரெஷன்களை ஆதரிக்கிறது

குறைபாடுகள்

• டெம்ப்ளேட் பிராக்கெட்டுகளுக்குள் அதிக லாஜிக்கை வைத்தால் படிக்கக் கடினமாகிவிடும்
• வெண்டார் பிரிஃபிக்ஸ்கள் (vendor prefixes) அல்லது உலாவிக்கான குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்துவதற்கான உள்ளமைக்கப்பட்ட வழி எதுவும் இல்லை
• செயல்திறன் (performance) முக்கியமானது மற்றும் உங்களிடம் பல டைனமிக் பைண்டிங்ஸ் இருந்தால், change detection சுமை (overhead) அதிகரிக்கலாம்
• தொடக்கநிலையாளர்கள் சிலவேளைகளில் இன்லைன் ஸ்டைல்களையும் கிளாஸ்களையும் நிலையற்ற முறையில் கலந்து பயன்படுத்துகிறார்கள், இது கோடைப் பராமரிப்பதைச் கடினமாக்குகிறது

எச்சரிக்கை

இங்கே காட்டப்பட்டுள்ள எடுத்துக்காட்டுகள் மற்றும் மதிப்புகள் (isActive, progressPercent, backgroundColor, முதலியன) பிளேஸ்ஹோல்டர்கள்—உங்கள் அப்ளிகேஷனுக்குப் பொருந்தக்கூடிய சொந்த வேரியபிள் பெயர்களைப் பயன்படுத்தவும். புரொடக்ஷனில் பயன்படுத்தும் முன் எப்போதுமே ஒரு உலாவியில் உங்கள் class மற்றும் style binding-களைப் பரிசோதிக்கவும். நினைவில் கொள்க, இதன் மூலம் பயன்படுத்தப்படும் இன்லைன் ஸ்டைல்கள்: [style] CSS கிளாஸ்களை மேலெழுதும் (override); நீங்கள் கிளாஸ் அடிப்படையிலான ஸ்டைலிங்கை நம்பியிருந்தால், இன்லைன் ஸ்டைல்களைக் கலப்பது எதிர்பாராத முடிவுகளை ஏற்படுத்தக்கூடும். உங்கள் சொந்த பொறுப்பில் தொடரவும் மற்றும் உங்கள் குறிப்பிட்ட பயன்பாட்டு நிகழ்வில் முழுமையாகப் பரிசோதிக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

• Angular-இல் class binding மற்றும் ngClass ஆகியவற்றுக்கு இடையேயான வித்தியாசம் என்ன?
• ஸ்டேடிக் கிளாஸ்களை டைனமிக் class binding-களுடன் இணைக்க முடியுமா?
• Angular-இல் CSS கஸ்டம் பிராப்பர்ட்டிகளை (CSS வேரியபிள்கள்) எவ்வாறு பைண்ட் செய்வது?
• பல டைனமிக் class binding-களைப் பயன்படுத்துவதால் ஏற்படும் செயல்திறன் தாக்கம் என்ன?
• இன்லைன் style binding இல்லாமலேயே கண்டிஷனல் ஸ்டைல்களைப் பயன்படுத்த முடியுமா?
• Style binding-இல் CSS அளவீடுகளை (px, em, rem) எவ்வாறு கையாள்வது?
• ஒரு style binding எக்ஸ்ப்ரெஷன் செல்லாத CSS மதிப்பைத் திருப்பியளித்தால் என்ன நடக்கும்?
• CSS அனிமேஷன்கள் மற்றும் டிரான்சிஷன்களுடன் style binding-ஐப் பயன்படுத்த முடியுமா?

டேக்குகள்

#angular #classBinding #styleBinding #webdevelopment #CSS #frontend #TypeScript #templates