Angular တွင် စတိုင်များ ပြောင်းလဲခြင်း

ngClass နှင့် ngStyle directives များကို အသုံးပြု၍ element များသို့ expression များကို bind လုပ်နိုင်ပြီး၊ ထို့ကြောင့် ကျွန်ုပ်တို့၏ စတိုင်များသည် ပြောင်းလဲနိုင်စွမ်းရှိမည်ဖြစ်သည်။

Component ၏ active property ကိုအသုံးပြု၍ စာသားကို ဖျောက်ထားခြင်း သို့မဟုတ် ပြသခြင်း လုပ်ဆောင်ကြပါစို့။

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

ဤ property ကို အသင့်အတင့် ဖွင့်/ပိတ်လုပ်မည့် toggle function ကို ရေးကြပါစို့။

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Component ၏ CSS file တွင် class အတွက် အောက်ပါ စတိုင်ကို သတ်မှတ်ပါ။

app/app.component.css.hidden {
  display: none;
}

Component template တွင် div တစ်ခုလုပ်ပြီး အထဲတွင် CSS class hidden ကိုထည့်ပါ၊ ထို class သည် component class မှ property active အပေါ် မူတည်၍ ဖွင့် သို့မဟုတ် ပိတ်သွားမည်ဖြစ်သည်။

app/app.component.html<div [ngClass]="{hidden: active}">
  စာသား
</div>

Button တစ်ခုကိုလည်း လုပ်ပါ၊ ၎င်းကိုနှိပ်လိုက်သည့်အခါ toggle method ခေါ်ပြီး ကျွန်ုပ်တို့၏ component ကို ပြသခြင်း သို့မဟုတ် ဖျောက်ထားခြင်း လုပ်မည်ဖြစ်သည်။

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