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

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

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

app/app.component.tsimport { FormsModule } from '@angular/forms';

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

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

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

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

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

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

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

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

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

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