Angular Component Styles

ယခု CSS ဖြင့် ကျွန်ုပ်တို့၏ markup ကို style လုပ်ကြပါစို့။ ဤအတွက် app.component.css ဖိုင်သည် အသုံးဝင်မည်ဖြစ်ပြီး၊ ၎င်းတွင် component ၏ markup အတွက် CSS styles များကို ရေးသားရပါမည်။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် Angular သည် styles များကို CSS module အနေဖြင့် အလုပ်လုပ်စေရန် ကိုယ်တိုင် ဂရုစိုက်ပေးပါသည်။ ဆိုလိုသည်မှာ selector အားလုံးသည် component ၏ markup အတွက်သာ အလုပ်လုပ်မည်ဖြစ်ပြီး ပြင်ပရှိ markup များကို သက်ရောက်မှု ရှိမည်မဟုတ်ပါ။

လက်တွေ့တွင် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့၏ component တွင် အောက်ပါ markup ရှိသည်ဟု ဆိုကြပါစို့။

<div>
	abcde
</div>

div အတွက် အရောင်သတ်မှတ်ကြပါစို့။

div {
	color: red;
}

ဤအခါတွင် ဤ style သည် ကျွန်ုပ်တို့၏ component မှ div များအတွက်သာ သက်ရောက်မည်ဖြစ်ပြီး အခြားမည်သည့် div များကိုမျှ မသက်ရောက်ကြောင်း သေချာနိုင်ပါသည်။

Template file တွင် markup အချို့ ပြုလုပ်ပါ။ ထို markup အတွက် styles များ ရေးသားပါ။