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

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

html[style.styleProperty]="property value"

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

ဥပမာ

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

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

ဥပမာ

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

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

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

ဥပမာ

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

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

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

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

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