Angular Component

Photo by Xavi Cabrera on Unsplash

Component

Angular မှာ component ဆိုတာ အရေးကြီးတဲ့ အစိတ်အပိုင်းတစ်ခုဖြစ်တယ်။ Web app တစ်ခုလုံးကို component တွေအဖြစ်စိပ်ခွဲလိုက်ပြီး သက်ဆိုင်ရာ business logic တွေကိုသက်ဆိုင်ရာ component မှာထည့်သွင်းခြင်းဖြင့် လွယ်ကူစနစ်ကျအောင် လုပ်ပါတယ်။ ဒါ့အပြင် component တွေက reusable ဖြစ်တာကြောင့် code duplicate မဖြစ်စေပဲ လွယ်ကူစွာ အသုံးပြုနိုင်မှာပဲ ဖြစ်ပါတယ်။

Create a New Component

• Project src/app အောက်မှာ folder တစ်ခုဆောက်ပါ။ ဥပမာ — server
• folder ထဲမှာ server.component.ts file တစ်ခုဆောက်ပါ။
• ထို file ထဲမှာအောက်ပါအတိုင်းရေးပါ။

import { Component } from '@angular/core';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
})
export class ServerComponent {}

• template အတွက် server.component.html file ကိုဆောက်ပေးပါ။ template (html) ထဲမှာ ကိုယ်ရေးချင်တဲ့ html element တစ်ချို့ကိုရေးလိုက်ပါ။ ဥပမာ —

<p>The Server Component</p>

• ဒါဆိုရင် အခုဆောက်လိုက်တဲ့ component သည်အခုလိုမြင်တွေ့ရမှာပါ။

server component

server.component.ts ထဲမှာ ရေးသားထားတာကို ပြန်ကြည့်ပါ။

export class ServerComponent {}သည် ရိုးရိုး typescript class တစ်ခုကိုကြေညာလိုက်တာဖြစ်တယ်။

@Component() သည် angular ကိုဒီ class သည် component ဖြစ်ကြောင်းကြေငြာပေးတဲ့ decorator ဖြစ်ပါတယ်။ @angular/core ကနေ import လုပ်ပေးဖို့လိုပါတယ်။

@Component() ထဲက selector သည် ဒီ component ကိုခေါ်ယူသုံးတဲ့အခါ အသုံးပြုရမဲ့ element tag ဖြစ်ပါတယ်။ ဥပမာ <app-server></app-server> လို့ခေါ်သုံးရမှာဖြစ်တယ်။

templateUrl ကတော့ ဒီ component မှာသုံးမဲ့ template ရဲ့ location path ကိုညွှန်ပေးရတာပါ။

ဒီလောက်ဆိုရင်အရိုးရှင်းဆုံး component တစ်ခုကို တည်ဆောက်ပြီးပါပြီ။

Understanding the role of AppModule and Component Declaration

Component တစ်ခုတည်ဆောက်ပြီးရုံနဲ့ ခေါ်ယူအသုံးပြုလို့မရသေးပါ။ အဲ့ဒါကြောင့် တခြား ဆက်စပ်မှုတချို့ကို အရင်လေ့လာရပါမယ်။

AppModule

Angular ဟာ component တွေကို web pages တွေတည်ဆောက်ဖို့သုံးပြီး module တွေကိုတော့ အစိတ်အပိုင်းတွေ bundle အဖြစ် ထုတ်ပိုးဖို့ သုံးပါတယ်။ အစိတ်အပိုင်းတွေဆိုတာ ဥပမာအားဖြင့် components တွေ services တွေပါ။

ပိုမိုနားလည်နိုင်စေရန် app.module.ts ကိုဖွင့်လိုက်ရင်အခုလိုတွေ့ရမှာပါ။

app.module.ts

Line 13 ကိုကြည့်လိုက်ခြင်းအားဖြင့် ပုံမှန် typescript class တစ်ခုကိုကြေငြာထားတာတွေ့ရမှာပါ။

line 7 က @NgModule() ဆိုတာ Angular ကိုဒီ class သည် module ဖြစ်ကြောင်းကြေငြာလိုက်တဲ့ decorator ပါ။

တကယ်တော့ module ဆိုတာ ဘယ်ဟာတွေပါဝင်မှာလည်းဆိုတာ ကြိုရေးပေးထားရတဲ့နေရာပါ။ အဲ့လိုရေးမှလည်း angular ကသိပြီး လုပ်ဆောင်နိုင်မှာပါ။ ဒါကြောင့် @NgModule() ထဲမှာ ပါဝင်မဲ့ အစိတ်အပိုင်းအချို့ကို ထည့်ပေးထားတာ တွေ့ရမှာပါ။

declaractions ဒီ array ထဲမှာတော့ ပါဝင်ချင်တဲ့ component တွေကိုရေးပေးရပါမယ်။

imports ဒီမှာတော့ တခြား module တွေကို import လုပ်ချင်ရင် ရေးရမှာပါ။ Angular ကိုယ်တိုင်ကိုက module တွေခွဲပြီး အလုပ်လုပ်တာဖြစ်လို့ အဲ့ဒီထဲမှာ တချို့ module တွေကို import လုပ်ထားတာ တွေ့ရမှာပါ။

providers ဒီမှာတော့ ပါဝင်ချင်တဲ့ services တွေကို ရေးပေးရပါမယ်။

bootstrap ဆိုတာ application စတင် run တဲ့အခါမှာ ဆွဲတင်ရမဲ့ component ကိုပြောပေးရမဲ့နေရာပါ။

Component Declaration

ဒီလောက် သိထားပြီဆိုရင် ရှေ့ဆက်လို့ရပါပြီ။ အခုလုပ်ဆောင်နေတာက ServerComponentကိုခေါ်ယူသုံးဖို့ လုပ်နေတာ ဖြစ်တဲ့အတွက် module တစ်ခုခုမှာထည့်ပေးဖို့ လိုအပ်ပါတယ်။ ဒါကြောင့် app.module.ts မှာ အခုလို ထည့်လိုက်ပါ။

ServerComponent added to AppModule

Using Custom Component

ဒီလိုထည့်ပြီးရင်တော့ ခေါ်ယူသုံးလို့ရပါပြီ app.component.html ကိုဖွင့်ပြီး အောက်ပါအတိုင်းရေးလိုက်ပါ။

<h1>Hello</h1>
<hr />
<app-server></app-server>

ပြီးရင် run လို့ရပါပြီ။ဒါဆိုရင် browser မှာအခုလို မြင်တွေ့ရမှာပါ။

Running localhost 4200

အခုဆိုရင်တော့ custom component တစ်ခုကိုအောင်မြင်စွာအသုံးပြုနိုင်လိုက်ပြီပဲဖြစ်ပါတယ်။

Previous: How an Angular App gets Loaded and Started

Next: Nesting Components