Angular တွင် Reactivity

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

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

export class AppComponent {
	public text: string = '';
}

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

<div>
	{{ text }}
</div>

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

<button (click)="show()">
	show
</button>

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

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

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

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