 Data binding plays a really important role in communication between templates and components. Data binding is really just a process or the mechanism used for pushing or pulling data between components and templates. So when a data is coming from the source to the view, that's called property binding, and coming from the view to the source is event binding. So one way data binding is always unidirectional. Let's take a look at the AngularView model we've seen earlier. So here in this model, the data binding occurs right here between these two yellow arrows here. So property binding is the flow data from the component to the template, and event binding is the flow data from the template to the component. Let's take a look how they are done in code. Okay, so here in the IDE, I'm going to open the front end, open the terminal in the mean stack agency, and we're going to run this app in gserve. Well, that's being compiled. Let's go open the src folder into the app folder, and let's open the template for the app component HTML and also the source, which is appcomponent.ts. So those are two files we need to modify. Okay, so I think that's going to be a good go there. And let's take a look at the browser first, and there's our app. All right, so I'm going to remove everything here. We'll just keep the blue bar so we can do a little demonstration right in this white space. Let's go back in here. And then in the template here, so I'm going to remove everything, we'll just keep the top bar, just the top bar here. And so I'll remove everything maybe like from line 30. We'll just keep the main container tag here, I think from like 28 all the way down to pretty much almost the end of the file. Yeah, everything to this SVG. We'll move all of that. And then also remove all these comments. We'll keep the router out there in the bottom. Okay, so we'll just do our examples right in here. You can remove all these comments in the top two, just takes too much space. All right, so much, much better. Okay, so let's just take a look and make sure it's there. Okay, good. All right, now let's go to the component first in here. As you can see in the class space here is where you have all your properties to be created in here. Any property or any variable you create outside of this class will not be recognized by Angular, because those are not Angular properties. Okay, these are just regular JavaScript variables. So we already have one here called title. It's created for us automatically when we create the application. I'm going to change the title to something a little bit more meaningful here and we'll display that to the browser. So this is a property to bind that to the property in this source here in the view here. Let's put an h1 tag and in here Angular uses a ms-tag, so a pair of double curlies like this. Inside this curly braces, double curly braces, you put your expression. Expression can be anything like a math expression, like 2 plus 2 or 2 minus 2, something like that. Or expression will be the title because that will be interpolated. It will be expressed as in terms of its string. So this is called the string or the text interpolation in Angular. It will convert whatever is inside here. If it's a calculation, it will do the evaluation and then display that to the browser. If it's a variable, then it's going to look inside the component to see if there's a variable called title. If there is, then grab the value and display that. If there is none, then you can either get an error or display no value, depends. So in this case, it's going to look at the title and finds one and then display that to the browser. So as you can see, it displays right here into the view. So that's one way of data binding from the source out to the view. So we can bind to a variable. I'll show you another one of our binding here. This would be a, let's put an h2 here. You can also bind to a function as long as the function returns some data, right? So you can say something like sum of something. And we invoke the function refresh or reload this view. And it's not created yet, but I want you to create that function first. Also, well, yeah, let's go to the component down here and create a function right below it. We'll call it sum is I'll use the anonymous function or the error function because it looks like an error property, right? As you can see, title is equal to a string. Sum is equal to a function. So you can use that. We can just use the regular function like sum, like this is fine too, right? So either way, but let's just use this. So it'll be kind of consistent with our title there. And so here I can return some data. So return something and to make it this little interesting, I'm going to go here and create another variable called nums. And it's going to be array of two numbers, 10 and 20, right? And we'll just display the sum of num of zero. And notice, if you type num, it doesn't let you do it because this is a variable in the class field, right? So to access data field, you must use the key with this dot num, okay? Plus this dot num or nums of one, I mean it's typed here. And then we return the sum of those two values to the h2 tag here, okay? So we should get 30 if you go on the browser. And there it is. We get 30 from the expression, right? It only loads once because once you invoke one time, then that's it until we refresh or reload the page and it will do another evaluation again. Okay, so that is how you can do using this way where you interpolate in text, binding properties and functions and properties and display it to a node or text node here. You can also bind attributes as well. And I'll just show you one here. But it will be the same thing, okay? Same way. So let's say here I'm going to bind to a style attribute and usually it says you just put like for example color red like this and that will give you the red color, right? So if you're just going to see it. So there it is, it's red, okay? We can do that using binding as well because this could be a variable inside the class. So if I copy that, let's go to the class and let's create a variable here. We'll call it red. It's equal to this string we just copied from the view. And so this red here holds the string of the text for the CSS. And if I go back here and just put inside here the same rules, curlies, and you put here red. Okay, you see that it has some red ears. It tells you it doesn't like it, but I think it should work. Okay, so if you save that and we could go through the browser again, just make sure it still works. So there it is. It still works just fine, okay? And so you can do it one way like that or there's another way to do it, but I'll just show you one more and we're done. So let's do this one here, okay? So this one here, let's call it style. Instead of binding that to the value, you can bind the property using style. I'm a little bit ahead of myself here. This is called property binding still, but you do the same way. So here let's put another variable called green instead, okay? So I'm binding to a green instead of the red. So that means I need to go to the class and create a variable called green. So let's go back in here and we create green down here. The same thing, color is green. Okay, so save that and make sure everything looks good here. Okay, so everything looks good. If we go to the browser, the fresher, you'll see that this is green just like we expect. All right? So that's one way binding from the source to the view. And one quick thing, you notice if I type greens like this, it gives me a red line in the template. You may not see this information here. And the reason I have it is because I installed a language service, which you can also do. So I want you to do this. Go to the extension here and search for the language service like this. And then install the Angular language service. So if you do that, then what you're going to get is a really useful way to help you determine if your code is correct or not right on the template here. If you don't do it, it doesn't work. This is a new feature added to Angular 9. So kind of nice. Okay, so that is how that's done. I'm going to remove this. It's kind of... I don't like that screwing line there. So let's just keep that. Okay, now let's do the other way around from binding from the template here to the source. Okay? So event binding. Usually you'll bind that to like a button. Right? And you can say click me. And how do you do that in JavaScript? Well, JavaScript traditionally you put like on click. Right? Equals to a function called click me. Like that. So similarly, you can do this way. Except when you bind in Angular, you don't use the whole on click here. You just the keyword click. This is the actual event name in JavaScript. Right? Like if you do an add event listener, you do the same thing. You don't put the word on click in there. You put just click up, key down, key press. Like that. But then you wrap this with a pair of parentheses. Okay? So that's called event binding. And this is you bind to a property. So you use these score brackets. Here you bind it to a function. So you event, you put a parentheses. Okay? So that's what you want. And so you need to invoke this function called click me. And we're going to create that function in the source. So over here, I'm going to go down here and create a function called click me. And you can do it the arrow function here again. So when you, the function is clicked, what do we do? We can display some message to the console. Something like clicked like that. Okay. Go back into the browser here and press F12 key. So you can see the console here when you click. And there's the message. Click me down here. All right. So let's make this a little bit interesting by doing a different kind of click. So when you click on it, you know, what kind of data do you pass to the source? Because this one doesn't pass any data. So when you pass data, you need to grab some data and pass to the function, right? So let's say that above here. I'm going to have a input tag. The type will be just, of course, text. You don't have to put that. It's automatic. And you do something like that. And so I can pass the data from here to the function. How do you do it? So in JavaScript, you usually give this an ID, right? So an ID will be something like this. And then you have something like, you know, input ID. Okay. But you don't do this with an Angular. To use an ID, you would replace this whole thing with a pound sign like CSS. So that is a unique ID for this input. Even though I call input, I shouldn't call that. But it's a unique ID for this input tag here. And this ID here is a reference in this template. So anywhere in this template, you reference the input, maybe making it a little more interesting input, you know, message or something. Okay. So the input message is an ID that references this input tag. And now because I have that reference here, I can use that inside a function as a parameter or argument. So I can say input and then get the value of the input tag. So get the value. And now whatever I type in this text box will be passed over to the function when I click on this button. So now the value we need to go and modify our function and receive a value from the source, the view. And then we can say here it's displayed the value in the console. But to make it more interesting, we can also have a variable outside here. Say that, you know, a message is equal to blank. But then when we see the value from the button, we can display the message back to the source, the view. Okay. So we bind that to the message. And then outside here, we do that when we're binding right. So you can put here an h3. We'll put it right in here, the message coming from this tag basically. You type something here, you pass to the function through event binding, and then it comes back out through property binding. So kind of think kind of similar deal up here. Except this is going in circle. So let's go back. And here we go. If I type in something here, hello, the tag click me, and there it is. Right. So that's event binding from the view to the source. And I'll do one more that will be done with this video. Now, this is a button you bind to that button. You can also bind to the input tag. So over here I can do something similar. I'm going to bind the key up event. And that's going to be equal to same thing, this same function. I'm going to, you know, copy this and put it right in here. Okay. So when I, you know, as soon as I type something, it's going to invoke its function every keystroke. And when I do that, it's going to also update my message down here. So let's save that and go back to the view. And if I type something here, hello, you'll see that it works right. Right. Right. Pretty cool, huh? So that's how event binding works. So again, just to recap, event binding is you bind to an event. Click or key up or mouse down, mouse over, all this stuff. And you pass the data to a function as an input. And you can pass the input from any tag if you have an ID associated with that. And then you pass that down to the source, a function call. If it sees the data, you assign that to whatever you need. And then the data binding, the property binding is you have a variable or a function like you see up here. And you pass it over to the view by using a pair of mustache tag or you bind that to a property like you do here. You can also bind to the value too, using the same thing instead of key up. I mean, instead of style you say you put the value and it will bind that to the data and you also see that as well. Okay, so that's how data binding works and using one direction in Angular.