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

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

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

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

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

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

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

.hidden {
	display: none;
}

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

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

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

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

ဘလောက် (block) သုံးခု ပေးထားသည်။ ခလုတ်သုံးခု လုပ်ပါ၊ တစ်ခုစီသည် ကိုယ်ပိုင် block ကို toggle လုပ်မည်ဖြစ်သည်။