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

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

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

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

ဥပမာ

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

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

ဥပမာ

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

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

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

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

ဥပမာ

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

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

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

<div [ngClass]="styles">
	စာသား
</div>

ဥပမာ

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

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

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

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

<div [ngClass]="styles">
	စာသား
</div>

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

CSS class နှစ်ခု ဖန်တီးပါ။ ၎င်းတို့ထဲမှ တစ်ခုသည် block ၏ background ကို သတ်မှတ်ပေးပြီး၊ ဒုတိယတစ်ခုက font size ကို သတ်မှတ်ပေးပါစေ။

ခလုတ် နှစ်ခု ပြုလုပ်ပါ။ ပထမခလုတ်ကို နှိပ်ခြင်းဖြင့် ပထမ class ကို toggle လုပ်ပါစေ၊ ဒုတိယခလုတ်ကို နှိပ်ခြင်းဖြင့် ဒုတိယ class ကို toggle လုပ်ပါစေ။