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

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

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

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

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

ဥပမာ

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

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

ဥပမာ

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

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

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

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

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

အောက်ပါ CSS class ကို ပေးထားပါသည်-

.hidden {
	visibility: hidden;
}

ဤ class ကို ဘလောက်တစ်ခုသို့ ချိတ်ဆက်ပါ။ ခလုတ်တစ်ခုကို လုပ်ပါ၊ ၎င်းကို နှိပ်လိုက်သောအခါ ဘလောက်သည် ပေါ်လာခြင်း/ပုန်းကွယ်ခြင်း ဖြစ်ရပါမည်။