Angular တွင် ဒေတာ နှစ်ဘက် ချိတ်ဆက်ခြင်း

Angular တွင် input သို့ စာရိုက်ထည့်သည့်အခါ ၎င်းစာသားသည် အလိုအလျောက် class ၏ property တစ်ခုထဲသို့ ဝင်ရောက်စေရန် ပြုလုပ်နိုင်ပါသည်။ ၎င်းကို ဒေတာ နှစ်ဘက် ချိတ်ဆက်ခြင်း ဟု ခေါ်သည်။

ထိုသို့ချိတ်ဆက်မှု အလုပ်လုပ်နိုင်ရန်အတွက် အစတွင် ၎င်းကို ဖွင့်ထားရန် လိုအပ်ပါသည်။ ၎င်းအတွက် component ဖိုင်ထဲတွင် FormsModule ကို import လုပ်ပါမည်။

import { FormsModule } from '@angular/forms';

ထို့နောက် decorator @Component ၏ imports property ထဲသို့ ထည့်ပါမည်။

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

၎င်းအပြီးတွင် ဒေတာ နှစ်ဘက် ချိတ်ဆက်မှုကို ဖွင့်လိုက်ပြီး ကျွန်ုပ်တို့ ထိုလုပ်ဆောင်ချက်ကို အသုံးပြုနိုင်ပါသည်။ ထိုသို့ပြုလုပ်ကြည့်ကြပါစို့။

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

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

ကျွန်ုပ်တို့တွင် div တစ်ခုနှင့် input တစ်ခု ရှိသည်ဆိုပါစို့။ div ထဲတွင် class ၏ property တစ်ခုခုကို ပြသပါစို့။

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

ယခု ကျွန်ုပ်တို့၏ property text ကို input ၏ အပြောင်းအလဲနှင့် ချိတ်ဆက်ကြပါစို့။ ၎င်းအတွက် input ထဲတွင် အထူး directive [(ngModel)] ကို ရေးရပါမည်။ ၎င်း၏ တန်ဖိုးအဖြစ် ကျွန်ုပ်တို့ class ၏ property ကို ဖော်ပြရပါမည်။

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

ယခု code ကို run လိုက်ပြီး input ထဲသို့ စာရိုက်ထည့်ပါက ထိုစာသားသည် div ထဲတွင် ချက်ချင်း ပြသလာမည် ဖြစ်သည်။

Input တစ်ခုနှင့် paragraph တစ်ခု ပေးထားသည်။ Input ထဲတွင် ဂဏန်းတစ်ခု ရိုက်ထည့်ထားသည်။ Input ထဲသို့ ဂဏန်းရိုက်ထည့်သည့်အခါ paragraph ထဲတွင် ထိုဂဏန်း၏ နှစ်ထပ်ကိန်း ပြသနိုင်ရန် ပြုလုပ်ပါ။

Input နှစ်ခုနှင့် paragraph တစ်ခု ပေးထားသည်။ Input များထဲသို့ ဂဏန်းများ ရိုက်ထည့်ကြသည်။ Paragraph ထဲတွင် ရိုက်ထည့်ထားသော ဂဏန်းများ၏ ပေါင်းလဒ်ကို ပြသနိုင်ရန် ပြုလုပ်ပါ။