Two way data binding in angular 2

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss Two way Data Binding in Angular 2.

@Component({
selector: 'my-app',
template: `
Name : [input [value]='name']
[br]
You entered : {{name}}
`
})
export class AppComponent {
name: string = 'Tom';
}

[input [value]='name'] : Binds component class "name" property to the input element’s value property
You entered : {{name}} : Interpolation displays the value we have in "name" property on the web page

At the moment when we change the value in the textbox, that changed value is not reflected in the browser. One way to achieve this is by binding to the input event of the input control as shown below.

[br]
You entered : {{name}}

At this point, as we type in the textbox, the changed value is displayed on the page.

So let's understand what is happening here. Conside this code

[br]
You entered : {{name}}

[value]='name' : This property binding flows data from the component class to element property
You entered : {{name}} - This interpolation expression will then display the value on the web page.

So in short two-way data binding in Angular is a combination of both Property Binding and Event Binding. To save a few keystrokes and simplify two-way data binding angular has provided ngModel directive. So with ngModel directive we can rewrite the follwing line of code

Like this : Name : [input [(ngModel)]='name']

At this point if you view the page in the browser, you will get the following error
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'

This is because ngModel directive is, in an Angular system module called FormsModule. For us to be able to use ngModel directive in our root module - AppModule, we will have to import FormsModule first.

Here are the steps to import FormsModule into our AppModule
2. Include the following import statement in it
3. Also, include FormsModule in the 'imports' array of @NgModule
imports: [BrowserModule, FormsModule]

With these changes, reload the web page and it works as expected.

So here is the syntax for using two-way data binding in Angular
[input [(ngModel)]='name']

The square brackets on the outside are for property binding
The parentheses on the inside are for event binding
To easily remember this syntax, compare it to a banana in a box [()]

[ruthyayele]

you make things simplify and lovely. you are blessed man. love your videos

[sudheercbit]

Thanks a lot Venkat for all the great work & sharing knowledge!!!

[icasemobileservicecenter]

hello sir can i get your slide show ?

[muthuprasanth]

hey I have a doubt.. Why required modules(Formsmodule) are imported into app.modules.ts and required components are into that particular requiring components
and also have another doubt why the imported modules are specified in imports array and why dont specify the imported components in declarations array

[lucasjohn]

Your video are very helpful.Thank you.

[LetCode]

This is the best Angular2 video on youtube 💖

[rajanamburi]

It helps a lot to me... thank you
sir

[varunbabu]

Hi Venkat. Thanks for the video. Would you be discussing angular 2 in a project oriented way later or just the concepts ?

[leopoldosantiago]

Thank you man. You help me with this error "Can't bind to 'ngModel' since it isn't a known property of 'input' ".
Keeping make videos!

[alritedave]

Love your work my friend, another great video. I'm really enjoying Ang2! I would purchase your tutorial on it if it was available :)

[anandavideos]

Hi Venkat, Could you please make few videos on Source Control, SSIS, SSRS, UML and Unit Testing?

[syednaqiulhasanrizvi]

Very helpful video, could you please make video regarding Angular 2 routing and navigation

[prasadpatil]

I learned from this video 1 two ways to do two way data binding 2 . Visual studio theme can be changed

[ravirajkathwate]

will you be posting an video of consuming rest service through Angular 2 ? . I must say videos are very helpful.

[ramakrishnareddy]

Hi Venkat, Could you please explain angular 2 with .Net Core in a project oriented manner

[vsa]

Hi Venkat..Im pretty new to angular could you please help me to use ngx pagination and jump to specific page along with number of items to display in grid.

[akashsamanekar]

nested component is not working on my visual studio

[AdvikaSamantaray]

What are the real time use of two way data binding? Can you give some examples? It has to more than just showing it when you type.

[braintricker_soft]

i'm using apache server .. i want my angular project localhost/porject but i can't make it can anyone help me ?

[_Muhammad_]

Error: Property value does not exist on type 'EventTarget'
Solution:
Replace
With