Angular ရှိ အခြေအနေများ၏ တုံ့ပြန်မှု

တုံ့ပြန်မှုသည် ngIf အခြေအနေများနှင့်လည်း အလုပ်လုပ်ပါသည်။ ဆိုလိုသည်မှာ အတန်းအတွင်းရှိ property တစ်ခုအတွင်းပါဝင်သည့် အရာအေပၚ မူတည်၍ ဘလောက်တစ်ခုကို ပြသခြင်း (သို့) ဝှက်ထားခြင်း ပြုလုပ်နိုင်ပါသည်။

လက်တွေ့တွင် စမ်းကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါဘလောက်ရှိသည်ဟု ဆိုကြပါစို့

<div>
	စာသား
</div>

ယခု ၎င်းကို အခြေအနေတစ်ခုအပေါ်အခြေခံ၍ ပြသခြင်း (သို့) ဝှက်ထားခြင်း ပြုလုပ်ကြပါစို့။

<div *ngIf="isShow">
	စာသား
</div>

ယခု ခလုတ်နှစ်ခု ပြုလုပ်ကြပါစို့။ ပထမတစ်ခုကို နှိပ်လိုက်သောအခါ ကျွန်ုပ်တို့၏ ဘလောက်ကို ပြသပြီး ဒုတိယတစ်ခုကို နှိပ်လိုက်သောအခါ ဝှက်ထားပါမည်။

<button (click)="show()">
	ပြပါ
</button>
<button (click)="hide()">
	ဝှက်ပါ
</button>

ဘလောက်ကို ပြသထားသည် (သို့) မပြသထားသည်ကို ထိန်းညှိမည့် property တစ်ခုကို component class ထဲသို့ ထည့်သွင်းကြပါစို့။

export class AppComponent {
	public isShow: boolean = true;
}

ယခု ကျွန်ုပ်တို့၏ ဘလောက်ကို ပြသရန်နှင့် ဝှက်ထားရန် method များ၏ အကောင်အထည်ဖော်ချက်ကို ရေးကြပါစို့။

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

ဘလောက်ကို ထိန်းချုပ်မည့် ခလုတ်တစ်ခုကို ပြုလုပ်ပါ။ ၎င်းကို နှိပ်လိုက်သောအခါ ဘလောက်ကို toggle လုပ်ပါ။ ဝှက်ထားပါက ပြပါ၊ ပြထားပါက ဝှက်ပါ။