Angular တွင် Reactivity

Public properties တွေ ပြောင်းလဲတိုင်း template က reactively ပြောင်းလဲသွားမှာဖြစ်ပါတယ်၊ ဆိုလိုတာက ချက်ချင်းပြောင်းသွားမှာပါ။ Angular ထဲက reactivity က ဒီလိုအလုပ်လုပ်ပါတယ်။

ဥပမာတစ်ခုနဲ့ ကြည့်ရအောင်။ ကျွန်တော်တို့မှာ စာသားပါဝင်တဲ့ property တစ်ခုရှိတယ်ဆိုပါစို့။

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

ကျွန်တော်တို့ရဲ့ property ကို tag တစ်ခုခုထဲမှာ ထုတ်ပြကြမယ်။

app/app.component.html<div>
  {{ text }}
</div>

အခု class method တစ်ခုကို ခေါ်ပေးမယ့် ခလုတ်တစ်ခု လုပ်ကြမယ်။

app/app.component.html<button (click)="show()">
  show
</button>

ဒီ method ထဲမှာ စာသားကို ပြောင်းလဲကြမယ်။

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

အခု code ကို run ပြီး ခလုတ်ကို နှိပ်လိုက်ရင်၊ နှိပ်ပြီးတာနဲ့ div ထဲက စာသား ချက်ချင်းပြောင်းသွားမှာပါ။