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

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

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

app/app.component.html<div>
  စာသား
</div>

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

app/app.component.html<div *ngIf="isShow">
  စာသား
</div>

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

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

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}