Angular හි CSS පන්ති සමූහ එකතු කිරීම

ngClass නිර්දේශය භාවිතයෙන් ටැගයකට වහාම CSS පන්ති සමූහයක් සක්‍රිය හෝ අක්‍රිය කළ හැකිය. නිර්දේශය අගයක් ලෙස වස්තුවක් පිළිගනී, එහි යතුරු වන්නේ පන්ති වන අතර අගයන් - බූලියන් අගයන් වේ. අගය true ලෙස සකසා ඇත්නම් පන්තිය සක්‍රිය වන අතර, false නම් අක්‍රිය වේ.

ප්‍රායෝගිකව බලමු. අප සතුව පහත පන්ති ඇතැයි සිතමු:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

කොටසක් සඳහා මෙම පන්ති සක්‍රිය හෝ අක්‍රිය කරන්නේ කෙසේදැයි උදාහරණ මගින් බලමු.

උදාහරණය

එක් පන්තියක් සක්‍රිය කර අනෙක අක්‍රිය කරමු:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  text
</div>

උදාහරණය

පන්තිවල තත්වයන් පංතියේ ගුණාංගවල ගබඩා වී ඇතැයි සිතමු:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

අපගේ ගුණාංගවල අගයන් මත පදනම්ව පන්තියේ දෘශ්‍යතාවය බැඳමු:

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

උදාහරණය

ගුණාංගයක පන්ති සහ තත්වයන් සහිත සම්පූර්ණ වස්තුවක් විය හැකිය:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

මෙම වස්තුව අපගේ කොටසට බැඳමු:

app/app.component.html<div [ngClass]="styles">
  text
</div>

උදාහරණය

අපගේ වස්තුව සඳහා අගයන් පංතියේ වෙනත් ගුණාංග වලින් ලබා ගත හැකිය:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

මෙම වස්තුව අපගේ කොටසට බැඳමු:

app/app.component.html<div [ngClass]="styles">
  text
</div>

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