Nesting Components

Photo by Seyi Ariyo on Unsplash

ရှေ့ article မှာ custom component တည်ဆောက်နည်းကို သိခဲ့ကြပြီ ဖြစ်ပါတယ်။ Component တွေကို manual တည်ဆောက်နိုင်သလို CLI နဲ့ လည်း generate ပြုလုပ်နိုင်ပါတယ်။

Generate Component with CLI

Angular CLI တွေကို ဒီမှာ ရေးသားခဲ့ပါတယ်။ component တစ်ခုကိုအောက်ပါအတိုင်း generate လုပ်လိုက်ပါ။

ng g c servers --skip-tests true

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

Servers Component

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

app.module.ts

ထူးခြားတာက CLI နဲ့ generate လုပ်ခဲ့တဲ့အတွက် auto ဒီမှာလာပြီး ထည့်ပေးသွားတာကို မြင်တွေ့ရမှာပါ။

Nesting Components

servers.component.html ကိုဖွင့်ပြီးအခုလိုရေးလိုက်ပါ။ app-server component တွေကို duplicate လုပ်ပြီ းခေါ်သုံးလိုက်တာ ဖြစ်ပါတယ်။

<app-server></app-server>
<app-server></app-server>
<app-server></app-server>
<app-server></app-server>

ပြီးရင်တော့ app.component.html ထဲမှာအခုလိုပြင်လိုက်ပါ။

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

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

Localhost:4200

ဒီ page ကို inspect လုပ်ကြည့်လိုက်မယ်ဆိုရင် အခုလို တွေ့ရမှာပါ။

inspect view of localhost

ဒီမှာဆိုရင် app-servers component ထဲမှာ app-server component တွေကို nesting လုပ်ပြီးပြပေးနေတာကို မြင်တွေ့ရမှာ ဖြစ်ပါတယ်။ ဒီနည်းနဲ့ component တွေကို ခေါ်ယူပြီး လိုသလို nesting လုပ်နိုင်မှာပဲ ဖြစ်ပါတယ်။

Previous: Angular Component

Next: Component Deep Dive