Component Deep Dive

Photo by Brooke Lark on Unsplash

Component Templates

Component Template တွေကို external အနေနဲ့ရေးလို့ရသလို TypeScript ထဲမှာ inline အဖြစ် ရေးသားလို့လည်း ရပါတယ်။ ရှေ့ article မှာရေးသားခဲ့တဲ့ servers.component.ts ထဲက @Component() ကိုကြည့်မယ်ဆိုရင် အခုလို တွေ့ရမှာပါ။

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.scss']
})

Internal အနေနဲ့ရေးသားဖို့ဆိုရင် templateUrl နေရာမှာ template လို့ပြောင်းပြီး အခုလိုရေးလိုက်ပါ။

@Component({
  selector: 'app-servers',
  template: '<app-server></app-server><app-server></app-server>',
  styleUrls: ['./servers.component.scss'],
})

template တွေကို multiple line အနေနဲ့ရေးချင်ရင် single quote အစား backtick ကိုပြောင်းပါ။

@Component({
  selector: 'app-servers',
  template: `<app-server></app-server>
             <app-server></app-server>`,
  styleUrls: ['./servers.component.scss'],
})

ဒီနည်းနဲ့ template တွေကို inline အဖြစ်ရေးသားလို့ရပါတယ်။ ကိုယ်ရေးမဲ့ template အခြေအနေကိုကြည့်ပြီး inline or external မှာရေးမလားဆိုတာ ဆုံးဖြတ်ရမှာ ဖြစ်ပါတယ်။

Component Styles

Component Style မှာလည်း external အနေနဲ့ရေးသားနိုင်သလို inline လည်းရေးလို့ရပါတယ်။

Style မပြင်ခင်မှာ ရေးသားနေတဲ့ template အနည်းငယ် ပိုကြည့်ကောင်းသွားအောင် app.component.html မှာအခုလိုပြင်ပေးပါ။

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Hello</h1>
      <hr />
      <app-servers></app-servers>
    </div>
  </div>
</div>

Angular နဲ့မသက်ဆိုင်သေးပဲ Bootstrap class တချို့ကို ကြည့်ကောင်းအောင် ထည့်လိုက်ခြင်းသာ ဖြစ်ပါတယ်။

Style တွေစထည့်ဖို့အတွက် app.component.scss ထဲမှာ အခုလိုရေးလိုက်ပါ။

h1 {
  color: darkblue;
}

ဒါဆိုရင် browser ထဲမှာ <h1> color ပြောင်းသွားမှာပါ။

<h1> color changed

ဒီ style ကိုပဲ inline မှာရေးသားချင်တယ်ဆိုရင် app.component.ts ထဲမှာရေးလို့ရပါတယ်။

ကြားဖြတ်အနေနဲ့ မှတ်သားရမှာက အောက်ကပုံကိုကြည့်ပါ styleUrls ဆိုတာ array တစ်ခုဖြစ်နေတာကို တွေ့ရမှာပါ။ သဘောက style တွေကို file တစ်ခုထက်ပိုပြီး ချိတ်ဆက်ပေးလို့ ရတယ်လို့ ဆိုလိုတာပါ။

app.component.ts

Inline အနေနဲ့ ပြောင်းလဲရေးသားဖို့အတွက် styleUrls ကို stylesလို့ပြောင်းပြီး အောက်ပါအတိုင်း ရေးလိုက်ပါ။

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    ` h1 {
        color: darkblue;
      }
    `,
  ],
})

ဒါဆိုရင်တော့ inline ရေးနည်းကိုလည်း သိသွားပြီ ဖြစ်ပါတယ်။

Component Selectors

Component selector သည် CSS selector အလုပ်လုပ်ဆောင်သလိုပဲ လုပ်ဆောင်ပါတယ်။ ဥပမာ —

1. CSS က element selector နဲ့ select လုပ်ယူသလိုမျိုး Component Selector ကလည်းလုပ်ဆောင်ပါတယ်။

Component selector work like element selector

2. CSS က attribute selector နဲ့ select လုပ်ယူသလိုမျိုး Component Selector ကလည်း လုပ်ဆောင်နိုင်ပါတယ်။

Component selector work like attribute selector

3. CSS က class selector နဲ့ select လုပ်ယူသလိုမျိုး Component Selector ကလည်း လုပ်ဆောင်နိုင်ပါတယ်။

Component selector work like class selector

ဒီ ၃ မျိုးအတိုင်း Component Selector ကိုရေးနိုင်ပါတယ်။ ဒါပေမဲ့ များသောအားဖြင့် element selector ပုံစံကိုသာ အသုံးပြုရမှာ ဖြစ်ပါတယ်။

Component Selector တွေကို တခြား native element, third party element တွေနဲ့တူသွားတာမျိုးမဖြစ်ဖို့ app- prefix ကိုအမြဲထည့်သုံးပါ။ eg. app-server

Assignment

• WarningAlert, SuccessAlertဆိုတဲ့ component ၂ ခုကို manual တည်ဆောက်ပါ။
• Warning/Success message တွေကို သက်ဆိုင်ရာ component တွေမှာထည့်ပါ။
• AppComponent ထဲမှာ ရေးထားတဲ့ component ၂ခုကိုထည့်ပါ။
• Component တွေကို နှစ်သက်ရာ Style တွေသတ်မှတ်ပေးပါ။

Previous: Nesting Components

Next: Data Binding