 Data binding is an important process in Angular, and so it's the process or the mechanism used for pushing or pulling data, depending on which direction the data is being sent. So Angular supports both one way and two way data binding. So in two way data binding, data is always bi-directional. That means data can start from the source out to the view, back to the source, or if you want to save from the view to the source back to the view, however you say it's still going to be the same thing. So let's again review this AngularView model here, and the data binding events occurs right in the module between the template and components. So in two way data binding, data property value flows from the component to the input box. This is the property binding, and then the users make any changes to the input box and the data flows back to the component, and then we're setting the property to the latest value, whatever that value is, via this event binding. So two way data binding combines the property and the event binding into a single notation, and this is achieved in Angular using a very special directive called ngModel. So let's go and take a look in the code. Okay, so here we are on the IDE. I'm going to go to the front again, open my terminal and run the app. Well, that's running. Let's go open the SRC folder into the app and open the app component HTML that's the view and then the source app component.ts. Okay, so that's running. And we want to make sure the app is running. So let's go to the browser and view the output. So over here. Oops. Okay, so in the view I'm going to go to the local host 4200 and this is the previous one. So as you can see, it's working just before. All right, so let's go to the code and let me close the terminal. All right, so two way data binding again. Remember it's coming from the source out to the view into an input box input tag and then from the input tag back to the source again. Okay, so the whole loop cycle there. So we can we can just do this here in this example using this thing and put here the message here. As you can see this way we did here is almost kind of like a two way binding except it's done a different way, right? Because we invoke a function called click me and we send the message and this text field the value back to a function. Function goes into and then implement or actually update the message down here. We update the message and then this message is going out the source direction to the view again and been displayed back in here. So anyway is doing this two way data binding, but that's not how it's done. So we're going to modify this a little bit. So now instead of doing the key up event we're going to bind this to a property called so you see the property usually we have value property, right? Equals to the actual message itself. This is the actual data field. But then you do this separately later when we learn about forms. But for two way data binding you will wrap this inside the value here replace that with a event called ngModel. This is a special directive in Angular. So this is also known as a banana operator because it looks like a banana I guess. But this is how two way data binding works. You bind to an input type of tag either input a select or a text area, right? And if you mouse over this it tells you something about cannot bind to unknown property. In order for this to work because usually this ngModel usually works with forms, web forms. We have to go and import a special module called forms module. So let's go and open the app module TS here and we need to import a module called forms module. So in here forms module and we're going to import that from the Angular form. Slash forms, okay? We need to import that there. And so this module need to be added to the ngModel as well and to this metadata. So in the imports here, this imports all the modules. This declaration imports all the component. So you can see that all the modules, you can see the browser module is put in here. The app module, a routing module is put in here. So I put in the declarations, that's just how it starts. So this is a module. So we're going to add it to the list here, put a comma and add the forms module there and then save this file and then we can close it now. So it goes away and now it's working. So this time it should work just like before flawlessly. You can save that now and go back to the browser. And you can see if I type in here it worked just like before, right? No problem because the data now flows from this input box to the source to a variable called message. And the message is then sent back out to display in the view here so we can see. But really what's happening behind the scene is that from this input box directly to the variable welcome in the back view has a direct connection that we just don't see it. So really it comes back right out here because it's hard to see that. So I'll put that so you can see here. But just to show you that it does work that way, let's go and modify this a little bit. Okay, notice when we tie this to the message, this is similar to how I did up here, right? We do a one-way binding. We bind to the style but then the variable is green and the green data is interpolated into this location. Same thing here. If you take out the ngModel then it's like the value, right? And we bind the value to the, it looks like this, right? You bind the value just like this and the message goes right here, okay? And that's what it looks like. So if I do like that, I go back to the source and let's just say the initial message was high there like that. If you save that and go to the view, you see the message is right here. This is the initial data so we know it is flowing from the source to the view. And then the other way around going from the view to the source is by removing this value and replace that with an event called ngModel, this angular model. And that's how data goes to an event, okay, directly from this variable, this view and then out back to the source and then comes back out. So you have this same behavior we saw earlier with the click function, but this time you don't need the click function because it does automatically. And so just to see how this works, really, I just showed you, but we can change this click event to say something like, hi there, okay? So when I click on this event, this function, it's going to, what happened here? Yeah, so did I do something wrong here? Not sure. Okay, so back in here, we can pass the value back in here. I'm going to change the value to whatever it was to a message called hi there. Well, I have the hi there. Let's remove this message back to blank, okay? And I'm not sure what this message shows up here. Did I do something correctly? Oh, that will close here. All right. No, in here is the single quotes. Let's put a single quote in here. Okay. Too many quotes here. All right. So when I load this, I should get nothing in the message box. When I click the button, it's going to fill that message with the word hi there because I click the function and the function calls. And then it changes the message to the word hi there. And then the hi there message is tied to the model here and also the output. So you can see that changes, right? So back in the view, here again, if I click on click me, you see that the message goes right there. If I make some changes here, this is now two way binding. If I change this back, you see that it changes back. So it just showed that one way binding and two way binding works in Angular. So that's simply it. How you can use data binding in Angular for two way is using the banana operator. And one way is using the, either you do it this way using this attribute, your binary attribute, or you can use the color basis like this.