Angular တွင် CSS Class များ ချိတ်ဆက်ခြင်း

Angular တွင် ဘလောက်တစ်ခုအတွက် CSS class တစ်ခုကို အသုံးပြုခြင်း/မပြုခြင်းကို ထိန်းချုပ်နိုင်ပါသည်။ ၎င်းကို အောက်ပါ ဖော်မတ်ဖြင့်ရေးထားသော tag ၏ attribute ကိုအသုံးပြု၍ လုပ်ဆောင်ပါသည်-

html[class.အမည်_အတန်း]="true သို့မဟုတ် false"

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

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

.bold {
  font-weight: bold;
}

ဘလောက်တစ်ခုအတွက် ဤ class များကို ဘယ်လို ဖွင့်ပိတ်ရမည်ကို ဥပမာများဖြင့် ကြည့်ကြပါစို့။

ဥပမာ

class တစ်ခုကို ဖွင့်ပြီး အခြား class တစ်ခုကို ပိတ်ကြည့်ပါမည်-

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  စာသား
</div>

ဥပမာ

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

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

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

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  စာသား
</div>

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

app/app.component.css.hidden {
  visibility: hidden;
}