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

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

[style.styleProperty]="property value"

ဤသို့ဖြစ်ရာတွင် ဟိုက်ဖန်များ ပါဝင်သော CSS properties များ၏ အမည်များကို ကျွန်ုပ်တို့၏ ကိစ္စတွင် camelCase ဖြင့် ရေးသားရပါမည်။ ၎င်း အလုပ်လုပ်ပုံကို ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

element တစ်ခုအတွက် နောက်ခံအရောင်သတ်မှတ်ကြမည်။

<div [style.backgroundColor]="'blue'">
	စာသား
</div>

ဥပမာ

ကျွန်ုပ်တို့တွင် နောက်ခံအရောင်ပါဝင်သည့် property တစ်ခုရှိသည်ဆိုပါစို့။

export class AppComponent {
	public value: string = 'red';
}

ဤ property ကို စတိုင်အတွက် တန်ဖိုးတစ်ခုအဖြစ် အသုံးပြုကြမည်။

<div [style.backgroundColor]="value">
	စာသား
</div>

ဥပမာ

ကျွန်ုပ်တို့တွင် boolean property တစ်ခုရှိသည်ဆိုပါစို့။

export class AppComponent {
	public isActive: boolean = true;
}

Boolean property ၏အကြောင်းအရာအပေါ် မူတည်၍ CSS property အတွက် တန်ဖိုးအမျိုးမျိုးကို ချိတ်ဆက်သွားမည်။ ဤအတွက် ternary operator ကို အသုံးပြုမည်။

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	စာသား
</div>

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

ဘလောက်တစ်ခုကိုပေးထားသည်။ ဘလောက်ကို ပထမအကြိမ်နှိပ်လိုက်ပါက အနီရောင်သို့ ပြောင်းစေပြီး၊ ဒုတိယအကြိမ်နှိပ်လိုက်ပါက အစိမ်းရောင်သို့ ပြောင်းစေရန် ပြုလုပ်ပါ။

ဘလောက်တစ်ခုကိုပေးထားသည်။ ခလုတ်တစ်ခုကိုပေးထားသည်။ ခလုတ်ကိုနှိပ်လိုက်ပါက ဘလောက်၏အကျယ်ကို နှစ်ဆတိုးစေရန် ပြုလုပ်ပါ။