Angular တွင် DOM element များ၏ properties များသို့ တန်ဖိုးများ ချိတ်ဆက်ခြင်း

Angular တွင် tag များသို့ တန်ဖိုးချိတ်ဆက်ခြင်း အမျိုးအစားနှစ်မျိုး ခွဲခြားထားသည်- tag ၏ attribute သို့ ချိတ်ဆက်ခြင်းနှင့် DOM element ၏ property သို့ ချိတ်ဆက်ခြင်း ဖြစ်သည်။ အများအားဖြင့် ၎င်းတို့သည် တူညီသော်လည်း တစ်ခါတစ်ရံတွင် ခြားနားချက် ရှိတတ်သည်။

ဥပမာများဖြင့် ဤနည်းလမ်းနှစ်ခုကို ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ class property ရှိသည်ဆိုပါစို့-

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

ဤ property ၏ တန်ဖိုးကို textarea ၏ စာသားအတွင်း ထုတ်ပြကြပါစို့။

app/app.component.html<textarea>{{ text }}</textarea>

ယခု placeholder attribute အတွင်း ထည့်သွင်းကြည့်ပါ-

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

ယခု အချက်အလက်များကို DOM element ၏ property အတွင်းသို့ တိုက်ရိုက်ရေးသွင်းကြည့်ပါမည်။ ထိုသို့ပြုလုပ်ရန် attribute အမည်ကို စတုရန်းကွင်းချွန်များအတွင်း ထည့်သွင်းရမည်-

app/app.component.html<textarea [value]="text"></textarea>