{"flag":true,"single":true,"pageTitle":"What is data Binding, oneway data binding and two way data binding, form submission, ngModel()","post":{"id":52,"user_id":"1","slug":"what-is-data-binding-oneway-data-binding-and-two-way-data-binding-hoog","title":"What is data Binding, oneway data binding and two way data binding, form submission, ngModel()","body":"

Data binding in Angular allows us to communicate between a component class and its corresponding view template.<\/p>\r\n

Variables <\/strong>defined in component class and its reflected to view auto. We can also pass data from view to component<\/strong>. <\/p>\r\n

COMPONENT TO VIEW:<\/strong><\/p>\r\n

export class HomeComponent {\r\n  name:any = 'Rizwan AG';\r\n}<\/code><\/pre>\r\n
in view access it as {{name}}<\/p>\r\n
MORE DETAILS FOR COMPONENT TO VIEW<\/strong><\/p>\r\n
There are two types of data binding:
One way data binding<\/strong> is, when we can access a component class property in its corresponding view template.
One way data binding is also, when we can accesS a value from viewtemplate in corresponding component<\/strong> class property. using event binding
We can acheive this using:<\/p>\r\n
String interpolation: {{data}}\r\nProperty binding: [property] = data<\/code><\/pre>\r\n
ie in users.component.ts<\/strong><\/p>\r\n
export class UsersComponent {\r\n  name:string = \"rizwan\"\r\n  source_image:string =\"https:\/\/bing.com\/th?id=OSGI.59DB7EF2DD8192C73058C817C47E2EF4&h=100&w=100&c=1&p=0\"\r\n  hiddenis:boolean=false;\r\n}<\/code><\/pre>\r\n
in users.component.html<\/strong><\/p>\r\n
<img [src]=\"source_image\" [hidden]=\"hiddenis\"><\/code><\/pre>\r\n
COMPONENT TO VIEW \/ VIEW TO COMPONENT <\/strong><\/p>\r\n
TwO way data binding<\/strong> binds data from component class to view template and View template to component class. This is a combination of property binding and event binding.<\/strong><\/p>\r\n
Concepts::<\/strong><\/p>\r\n
with SQUARE BRACKETS <\/strong>[] We can bind any attribute to a variable from component ie <\/strong><\/p>\r\n
<input type=\"text\" [value] = \"mynameis\"><\/code><\/pre>\r\n
where value is attribute , myname is variable from component and [] bound it.<\/p>\r\n
But when we change value from input box its not reflect to variable in component<\/strong><\/p>\r\n
1.search.component.js<\/p>\r\n
export class SearchComponent {\r\n  search_value:string = \"its so cool\";\r\n  changeValue(eventis:any){ \/\/its optional\r\n    console.log(eventis);\r\n  }\r\n}<\/code><\/pre>\r\n
2.search.component.html<\/p>\r\n
<input type=\"text\" class=\"form-control\" [(ngModel)]=\"search_value\" (input)=\"changeValue($event)\"><\/code><\/pre>\r\n
3.in app.module.ts, import FormsModule <\/strong>and add it in imports object<\/p>\r\n
import {FormsModule} from \"@angular\/forms\";\r\n\r\nimports: [\r\n    BrowserModule,\r\n    FormsModule\r\n  ],<\/code><\/pre>\r\n
Now data in input field (view) is also in component.js <\/p>\r\n
 <\/p>\r\n
ngModel <\/strong>is a built-in directive in Angular that provides two-way data binding between a form control (such as an input field, textarea, or select element) and a component's property.<\/p>\r\n
With ngModel<\/strong>, any changes made to the form control's value in the UI will be automatically reflected in the component's property\/variable, and vice versa.<\/p>\r\n
The ngModel directive is part of the FormsModule<\/strong> module, so you need to import it first.<\/p>\r\n
view<\/strong><\/p>\r\n
<form #myForm=\"ngForm\" class=\"mt-5\" (ngSubmit)=\"handleForm(myForm.value)\">\r\n    <input type=\"text\" name=\"name\" ngModel>\r\n    <input type=\"text\" name=\"age\" ngModel>\r\n    <button type=\"submit\">Submit<\/button>\r\n<\/form>\r\n<\/code><\/pre>\r\n
component: <\/strong>all data will be passed here<\/p>\r\n
handleForm(data:any){\r\n    console.log(data);\r\n  }<\/code><\/pre>\r\n
also add module in app.module.ts<\/p>\r\n
 imports: [\r\n    FormsModule\r\n  ],<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-27T03:30:18.000000Z","updated_at":"2023-03-31T02:24:48.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Data binding in Angular allows us to communicate between a component class and its corresponding view template. Variables defined in co - What is data Binding, oneway data binding and two way data binding, form submission, ngModel() (Updated: March 31, 2023) - Read more about What is data Binding, oneway data binding and two way data binding, form submission, ngModel() at my programming site [SITE]","categories":[]}