What is data Binding, oneway data binding and two way data binding, form submission, ngModel()

Data binding in Angular allows us to communicate between a component class and its corresponding view template.

Variables defined in component class and its reflected to view auto. We can also pass data from view to component. 

COMPONENT TO VIEW:

export class HomeComponent {
  name:any = 'Rizwan AG';
}

in view access it as {{name}}

MORE DETAILS FOR COMPONENT TO VIEW

There are two types of data binding:
One way data binding 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 class property. using event binding
We can acheive this using:

String interpolation: {{data}}
Property binding: [property] = data

ie in users.component.ts

export class UsersComponent {
  name:string = "rizwan"
  source_image:string ="https://bing.com/th?id=OSGI.59DB7EF2DD8192C73058C817C47E2EF4&h=100&w=100&c=1&p=0"
  hiddenis:boolean=false;
}

in users.component.html

<img [src]="source_image" [hidden]="hiddenis">

COMPONENT TO VIEW / VIEW TO COMPONENT 

TwO way data binding binds data from component class to view template and View template to component class. This is a combination of property binding and event binding.

Concepts::

with SQUARE BRACKETS [] We can bind any attribute to a variable from component ie 

<input type="text" [value] = "mynameis">

where value is attribute , myname is variable from component and [] bound it.

But when we change value from input box its not reflect to variable in component

1.search.component.js

export class SearchComponent {
  search_value:string = "its so cool";
  changeValue(eventis:any){ //its optional
    console.log(eventis);
  }
}

2.search.component.html

<input type="text" class="form-control" [(ngModel)]="search_value" (input)="changeValue($event)">

3.in app.module.ts, import FormsModule and add it in imports object

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

imports: [
    BrowserModule,
    FormsModule
  ],

Now data in input field (view) is also in component.js 

ngModel 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.

With ngModel, 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.

The ngModel directive is part of the FormsModule module, so you need to import it first.

view

<form #myForm="ngForm" class="mt-5" (ngSubmit)="handleForm(myForm.value)">
    <input type="text" name="name" ngModel>
    <input type="text" name="age" ngModel>
    <button type="submit">Submit</button>
</form>

component: all data will be passed here

handleForm(data:any){
    console.log(data);
  }

also add module in app.module.ts

 imports: [
    FormsModule
  ],