Angular පාඩම 6 - data binding

අපි අද බලන්න යන්නෙ data binding කියන්නෙ මොකද්ද කියල... මේක one way data binding සහ two way data binding කියල ආකාර දෙකයි... ඒකෙන් two way data binding කියල කියන්නෙ template එක පැත්තෙ ඉදන් component එක පැත්තටත් (ඒ කියන්නෙ  html file එකේ ඉදන් ts file පැත්තට) component එකේ ඉදන් template එක පැත්තටත් එකවර data pass කරන වැඩේට...මේකෙ එක පැත්තකට විතරක් data pass කරනවනම් ඒකට one way data binding කියල කියනවා...

අපි මේ වැඩේ කරන්න  login form එකක් හදාගමු.
මුලිම්ම අපි login කියන නමින් component එකක් හදාගමු.( >ng g c login )
ඒට පස්සෙ මේ වගේ bootstrap login form එකක් login.component.html එකට දාගන්න..

දැන් ඒකෙ selector එක app.component.html එකට දාගන්න ඕන.. (<app-login></app-login>)...මතක නැතිනම් කලින් පාඩම් බලන්න.
ng serve කරගත්තාම මේ විදියට පෙනේවි.

දැන් අපි මේ form එකට නමක් දෙන්න ඕන... <form #login = "ngForm"> කියල දෙන්න පුලුවන්..ඒ වගේම  මේ form එක submit කලාම වෙන්න ඕන දේ ts file එකේ ලියගන්න පුලුවන්...එහෙම කරන්න නම් form එකේ ඒ අදාල method එක මේකයි කියල ලියන්න තියෙන්න ඕන..
<form  (ngSubmit)="onSubmit(login)" #login = "ngForm"> 
මෙතන method එකට login කියල ngForm එකෙ විස්තර ටික යවල තමයි තියෙන්න.

දැන් අපි මේ form එකේ විස්තර console log කරගන්න බලමු.
ඒකට login.component.ts එකේ මේ විදියට onSubmit() කියන  method එක ලියාගන්න ඕන.
method එක ඇතුලෙ ngForm එකෙන් එන data console log කරගන්න පුලුවන්ද කියල බලමු...

ඊට කලින් NgForm එක import කරගන්න අමතක කරන්න එපා...
NgForm import කරගන්න කලින් app.module.ts එකට FormsModule එක import කරගන්න වෙනවා...

login.component.ts එක එන්නෙ මේ විදියට...

දැන් අපි form එක submit කරල inspect බැලුවොත් අපේ ngForm එක  console log වෙලා තියෙනව බලාගන්න පුලුවන්...

 ඒ කියන්නෙ දැන්  අපේ form එක වැඩ කරනව කියන එකයි...

දැන් අපි බලමු මේ input , console log කරගන්න හැටි.ඒකට අපි input එකට නමක් දෙන්න වෙනව...ඒ වගේම ngModel කියන directive එක දෙන්න ඕන...ඒක කරන්නෙ මේ විදියට...

email එකයි password එකයි console log කරන්නෙ මේ විදියට...

දැන් email එකයි..password එකයි ගහල submit කලාම මේ විදියට console log වෙනවා බලාගන්න පුලුවන්....

හරි දැන් අපි බලමු data bind කරන්නෙ කොහොමද කියල..

මුලිම්ම අපි oneway data binding එකක් කරන හැටි බලමු.ඒ කියන්නෙ component එකේ ඉදන් template එකට.

ඒකට අපි component එකේ object එකක් හදාගන්න ඕන.student කියල object එකක් හදාගමු.ඒ object එකේ අපේ form එකට ගැලපෙන විදියට json type එකට attribute ටිකක් හදාගමු.

      student={

                email:" ",

                password: " "

               }

දැන් ඔය email , password template එකට bind කරගන්න ඕන... ඒක කරන්න නම් template එකේ ngModel එකට අපි component file එකේ  සාදගත් object එකේ තියෙන attributes දෙන්න වෙනවා.. ඒක කරන්නෙ මෙහෙමයි... (ngModel එකට square brackets දාගන්න ඕන.)

දැන් ගොඩක් දුරට වැඩ ඉවරයි..component එකට අපට කැමති values දුන්නම component එකෙන් template එකට data bind වෙලා තියෙන නිසා open කරදිදිම form එක ඒ values වලින් fill වෙලා තියෙනවා බලාගනන පුලුවන්...

ඒ වගේම දැන් object එක  console log කරගත්තොත් ඒ values ටිකම බලාගන්න පුලුවන්.

දැන් අපි value එක change කරල submit කලොත් console log වෙන්නෙ අර කලින් තිබුනු value එකමයි...ඒකට හේතුව අපි මේකෙ කරල තියෙනෙ one way bind එකක් හින්ද..data pass වෙන්නෙ component එක පැත්තෙ ඉදන් template එක පැත්තට විතරයි.template එක change කලා කියල console log එක වෙනස් වෙන්නෙ නෑ...

මේ නිසා ඒකට two way bind කරන්න වෙන්වා...

එකට banana in the box syntax (   [(  )]  )  එක use කරනව..

දෙන් two way data bind එකත් කරල ඉවරයි. දැන්  template එකේ කරන වෙනස්කමක් නිසා component එක ඒ කියන්නෙ console log එක change වෙනවා...

 හරි.data binding අදට ඉවරයි...අලුත් ලිපියකින් ආයෙත් හමුවෙමු.

සුබ දවසක්...!