Built-in Directives

Published in

Learn Ng

3 min readApr 27, 2021

What is Directive?

Directive ဆိုတာ instruction တစ်ခုပါပဲ template ထဲမှာ Angular ကိုတစ်ခုခုလုပ်ဆောင်ခိုင်းလိုက်တာပါ။ ဥပမာအားဖြင့် Component ဆိုတာလည်း directive တစ်ခုပဲ template ရှိတဲ့ directive ပေါ့။ အဲ့ဒီ component ရဲ့ selector ကို template တစ်နေရာမှာရေးလိုက်ပြီဆိုရင် Angular ကအဲ့ဒီ ရေးလိုက်တဲ့ နေရာမှာ component ရဲ့ template နဲ့ business logic ကိုလာပြီးတော့ render လုပ်ပေးရပါတယ်။ ဒါက directive ကိုအသုံးပြုလိုက်ခြင်း ဖြစ်ပါတယ်။ Directive တွေဟာ template ရှိတဲ့ directive ရှိသလို template မရှိတဲ့ directive တွေလည်းရှိပါတယ်။

ကိုယ်တိုင် directive တွေတည်ဆောက်နိုင်ပေမဲ့ အရင်ဆုံး built-in ပါဝင်တဲ့ directive တွေကို လေ့လာရပါမယ်။

*ngIf

*ngIf ဆိုတာ directive တစ်ခုဖြစ်ပါတယ်။ DOM structure ကိုပြောင်းလဲနိုင်စွမ်းရှိတာကြောင့် Structural Directive လို့လည်းခေါ်ပါတယ်။ ရှေ့ဆုံးမှာ * ကိုမပါမဖြစ်ထည့်ရပါမယ်။ Conditional statement တွေ HTML မှာရေးသားဖို့အတွက် သုံးနိုင်ပါတယ်။

HTML
<p *ngIf="showStatus">Status is online</p>TypeScript
showStatus: boolean = true;

showStatustrue ဖြစ်မှသာ <p> element ကို DOM ထဲမှာထည့်ပေးမှာဖြစ်ပြီး မဟုတ်ရင်ထည့်ပေးမှာ မဟုတ်ပါ။ ဒီလိုမျိုး element ကို add/remove လုပ်ပြီး HTML structure ပြောင်းလဲအောင် လုပ်ဆောင်တာကြောင့် Structural Directive လို့ခေါ်ရခြင်းဖြစ်တယ်။ Boolean တန်ဖိုးပြောင်းကြည့်ပြီး inspect လုပ်ကြည့်ပါ။

*ngIf-else

If-else ရေးသားနည်းကတော့ အောက်မှာလေ့လာကြည့်ပါ။

HTML
<p *ngIf="showStatus; else elseBlock">Status is online</p><ng-template #elseBlock>
  <p>Status is offline</p>
</ng-template>

else ဖြစ်ရင် elseBlock ဆိုတဲ့ local reference ကိုသွားပါလို့ ပြောထားပါတယ်။ else ဖြစ်ရင် ပြပေးရမဲ့ block ကို ng-template နဲ့ရေးရပါတယ်။ ng-template မှာ #elseBlock ဆိုတဲ့ local reference ရှိနေတာကြောင့် else condition ဆိုရင် ဒီကိုရောက်လာရခြင်းပဲ ဖြစ်ပါတယ်။

Asterisk(*) ပါရင် Structural Directive ။ မပါရင် Attribute Directive။

ngStyle

DOM structure ကိုပြောင်းလဲခြင်းမရှိပဲ element ရဲ့ properties တွေကိုသာပြောင်းလဲပေးတာကြောင့် Attribute Directive လို့ခေါ်ပါတယ်။ * လည်းမပါဝင်ပါ။

Element တွေရဲ့ CSS Style တွေကို condition အရပြောင်းလဲချင်ရင် သုံးနိုင်ပါတယ်။

HTML
<p [ngStyle]="{backgroundColor: getColor()}">Server is {{status}}</p>TypScript
status = "offline";getColor() {
  return this.status === "online" ? "green" : "red";
}

ngStyleကို property binding နဲ့တွဲသုံးပြီး JS obj တစ်ခုကို ထည့်ပေးရပါတယ်။ အထဲမှာ key: value ပုံစံနဲ့ CSS style တွေကိုရေးသားနိုင်ပါတယ်။ အခုလို camel case ပုံစံရေးသားနိုင်သလို ‘background-color’ ဆိုပြီးတော့လည်းရေးနိုင်ပါတယ်။ ဒီလိုရေးရင်တော့ single quote ထည့်ပေးရပါမယ်။

ngClass

ngClass သည်လည်း attribute directive ဖြစ်ပါတယ်။ JS obj တစ်ခုထည့်ပေးရပြီး class တွေကို key: value ပုံစံထည့်ပေးရပါတယ်။

HTML
<p [ngClass]="{textColor: status === 'online'}">Server is {{status}}</p>CSS
.textColor {
  color: white
}

textColorဆိုတဲ့ class ကို status online ဖြစ်ရင်ထည့်ပေးပါလို့ရေးထားတာဖြစ်ပါတယ်။

*ngFor

For-loop ရေးသားဖို့အတွက် သုံးပါတယ်။ Structural Directive ဖြစ်တယ်။ ရေးသားပုံ ကိုအောက်မှာကြည့်ပါ။

HTML
<p *ngFor="let server of servers">{{server}}</p>TypeScript
servers = ['server1', 'server2', 'server3'];

serversarray ကို for loop ပတ်ပြီး ထုတ်ကြည့်ထားတာပါ။ * ပါဝင်တာကိုသတိပြုပါ။ JS for-of ပုံစံနဲ့ဆင်တူပါတယ်။

Getting index from *ngFor

for-loop ပတ်ရင် index လိုချင်တဲ့အခါ အခုလို ရယူနိုင်ပါတယ်။

HTML
<p *ngFor="let server of servers; let i = index">{{i+1}}. {{server}}</p>TypeScript
servers = ['server1', 'server2', 'server3'];

indexဆိုတဲ့ keyword က array ရဲ့ current index တွေထုတ်ပေးပါတယ်။ အဲ့ဒါကြောင့် i ထဲကို အခုလိုပဲ ကူးထည့်လိုက်ပြီးတော့ ထုတ်ကြည့်ထားတာပဲ ဖြစ်ပါတယ်။

Assignment

Show Detail ဆိုတဲ့ button တစ်ခုထည့်ပါ။ button ကိုနှိပ်တဲ့အခါ “This is detail text” ဆိုတဲ့စာကို show/hide toggle လုပ်ပါ။
Button click လိုက်ရင် log array ထဲမှာ log တစ်ကြောင်းထည့်ပေးပါ။ (eg. Button is clicked). ပြီးရင် array ကိုထုတ်ပြပေးပါ။
Log တွေထုတ်ပြရင် နံပါတ်စဥ်တပ်ပေးပါ။ (eg. 1. Button is clicked)
၅ခုမြောက်နဲ့ အထက် log တွေကို ngStyleနဲ့ background color အနီပြောင်းပြီး၊ ngClassနဲ့ text color အဖြူရောင် ပြောင်းပေးပါ။