Angular တွင် CSS Classes များကို အစုလိုက် ချိတ်ဆက်ခြင်း

ngClass directive ကို အသုံးပြု၍ tag တစ်ခုတွင် CSS classes အစုတစ်ခုလုံးကို ဖွင့်ခြင်း၊ ပိတ်ခြင်း ပြုလုပ်နိုင်သည်။ ၎င်း directive သည် တန်ဖိုးအဖြစ် object တစ်ခုကို လက်ခံပြီး၊ ၎င်း၏ keys များသည် classes များဖြစ်ကာ တန်ဖိုးများမှာ boolean တန်ဖိုးများ ဖြစ်သည်။ Class တစ်ခုသည် ဖွင့်ထားမည်ဆိုလျှင် ၎င်းအတွက် တန်ဖိုးသတ်မှတ်ချက် true ဖြစ်ရမည်၊ ပိတ်ထားမည်ဆိုလျှင် false ဖြစ်ရမည်။

လက်တွေ့စမ်းကြည့်ကြရအောင်။ ကျွန်ုပ်တို့တွင် အောက်ပါ classes များ ရှိသည်ဆိုပါစို့:

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

.bold {
  font-weight: bold;
}

ဒီ classes များကို block တစ်ခုအတွက် ဘယ်လို ဖွင့်၊ ပိတ်ရမည်ဆိုတာ ဥပမာများဖြင့် ကြည့်ကြရအောင်။

ဥပမာ

Class တစ်ခုကိုဖွင့်၊ အခြားတစ်ခုကိုပိတ်ကြည့်မည်:

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

ဥပမာ

Classes များ၏ အခြေအနေများကို class ၏ properties များတွင် သိမ်းထားသည်ဆိုပါစို့:

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

ကျွန်ုပ်တို့၏ properties များ၏ တန်ဖိုးပေါ် မူတည်၍ class ၏ မြင်ကွင်းကို ချိတ်ဆက်ပေးမည်:

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

ဥပမာ

Property တစ်ခုတွင် classes နှင့် ၎င်းတို့၏ အခြေအနေများ ပါဝင်သော object တစ်ခုလုံး ရှိနိုင်သည်:

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

ဤ object ကို ကျွန်ုပ်တို့၏ block သို့ ချိတ်ဆက်ပေးမည်:

app/app.component.html<div [ngClass]="styles">
  စာသား
</div>

ဥပမာ

ကျွန်ုပ်တို့၏ object အတွက် တန်ဖိုးများကို အခြား class properties များမှ ရယူနိုင်သည်:

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

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

ဤ object ကို ကျွန်ုပ်တို့၏ block သို့ ချိတ်ဆက်ပေးမည်:

app/app.component.html<div [ngClass]="styles">
  စာသား
</div>

လက်တွေ့လေ့ကျင့်ခန်းများ