In the session, let us learn about two way data binding. Two Way data binding is used for passing the data from the source to the view and from the view back to the source. It's like so to view view to source to a data binding can be achieved with entity model directive. When you are using entity model directive, you have to wrap this directive with round brackets and square bracket that is parenthesis followed with a square bracket. Have a look on this example. I have got an input tag to the input tag I'm using mg model attribute.

This attribute is wrapped with parenthesis followed by square bracket and it is assigned a value username. The value for the user name is retrieved from the source in the source that is in the component class I have given the value of raw juice So, in the text famous shows, it will have a default value of Roku. If the user comes here and if he is changing his this value automatically it will be taken back to the source. If you want to retrieve it you can retrieve it using interpolation. Whenever you are working with the entity model attributes, you cannot use it directly you have to import the module to which it belongs, it belongs to forms module. So, you have to import forms module and also added to the import in app.module.ts file.

Now, let us try this out. Let me go back to Visual Studio code. Let me start here. We are going to learn about two way data binding. So, here I'm just going to start with an input tag, input end model, round bracket and square bracket You can select it and also you can give equal to username. And I'm also trying to retrieve the user name next to the input field.

Now let me save this go to Home component.ts Here, let me add a username equal to Roger ending it with a semicolon. Let me save it, what is the next step we need okay. So this is an instance variable, you cannot add it next to the methods it's always in this manner. First all the variables should be declared then only must have functions. You can just have a look over here. This is a error message and getting declaration of instance fields not allowed after declaration of instance method.

So let me just cut it and I need to add it over here. And see, okay, all set here. Next, I need to import it. Let us see what happens if we don't import it. I'm saving this file. Now I will open it in the browser.

I am not getting any output. Let me select right click inspect in the console, I'm having an error message end model and the model is not understood at all. That is meaning it isn't known a property of input. So what we have to do we have to import forms module. So let me go back to Visual Studio code here, I need to open app.module.ts in app.module.ts, I need to import it. Import forms module within curly brace, forms module from Angular forms and then get to the semi colon and this false module should be added to the inputs here, comma forms module Let me save it.

Now the application ran successfully. Let me open it in the browser. Now I have got the output. Can you see it? Yeah. Now I'll scroll down here you can see I got Raj you, right change this value and changing it.

Now you can see the output, the moment I change automatically this getting reflected over here, like, let me just comment the rest of the part. I'll open home component dot html and commented. Now I hope you can see it properly. I'll refresh. And now I'm removing value. I'm changing it to guitar some name automatically shown over here.

This is called us two way data binding the data is carried from the source to view so that is what was Roger again from the view it is carried back to the source, which we are retrieving it using interpolation. In case of interpolation, sorry in case of two way data binding, it happens in both ways. Immediately it happens, whatever changes I make over here in the text field is reflected immediately because data gets carried from source to view view to source, that is what we are retrieving and using interpolation, the data from the source we are retrieving using interpolation. So, this is about two way data binding. Thank you