[MUSIC] If you have a static website, then you have all the data that you need in order to build your website. And it'll be created once and your website is ready to go. But many websites these days are driven by data from the backend. Your web application will fetch data from a backend server and then use the data to dynamically layout content on your website, or even update content on your website. So this requires the data to flow from the backend through your web application to the DOM. And any user interaction on the DOM should be conveyed back to your web application. So this requires the communication between the DOM and your component in the angular framework for example. Let's look at how this happens within the angular framework and with a little bit more detail. What we have learned so far is how a component is prepared. So we saw that the component has two major parts, the typescript file where the component's architecture is defined, and the properties. And the methods of and then you have the template that defines how the content is laid out, and added into the DOM. So the template is the one that is going to supplied by a component to occupy a part of your webpage. So the template forms the communication medium to your DOM. And this template requires data to be gotten from your component in order to render parts of the content on your template and correspondingly within the DOM of your web page. Now, if you didn't have the luxury of a framework like Angular, you have to deal with the entire details about how the data flows from the application site to the DOM. And how the user interaction events that the caused in the DOM will be sent back to your application. Fortunately, with frame works like Angular, they support all these behaviors inherently. Now we have already seen one use of the flow of data from a components property to the template in the previous exercises. Where we used the double curly braces to supply information that is from a variable in your component's TypeScript code, to your template. We'll look at other ways, and then also in the exercise that follows, we will make use of this, to modify the angular application that we have been developing so far. What we have been talking, so far, is data binding, a mechanism for coordinating the flow of information between the template and the component, or between the DOM and the component. In the component level, it's some kind of a property or a method that needs to be either supplied to the template or invoked from the DOM. Or on the template side, it may be some information that is required by the template to be rendered into the DOM or even from the DOM captured and sent back to your component. So all this requires data flowing from the component to the template or events that are gathered from the DOM or to be sent back to your component for it to act upon those events. Now this can be easily handled in angular framework using four different kinds of flow of information which we will summarize in the next slide. Coming back to the interaction between component and the template, we have already seen the first kind of interaction between the component and the template where the value of a property was flowing into the template. So we saw the use of the dish name, the dish description, the dish comment details and so on being supplied in order to render information in your template. So that is where we were using the double braces to enclose the fact that a value from your component is being used in your template. Another kind of flow of information which you will see Is where you specify some kind of a property associated with a tag in square brackets. And then assign it to be the value from one of the properties in your component. This kind of approach we will see in the exercise that follows right after this lecture. So here we would specify something in square brackets. So watch out for an example of that in the exercise where I will discuss more about this. Similarly, if you have an event generated near DOM, that event may result in the call to a handler or a method In your component that will take care of handling this event. So the methods that are going to be invoked by the events from your DOM are referred to as handlers. So, the handle is nothing but, as I said a method, which might also be passed in some parameter inside the handler methods there. Later on, when we look at forms, we will see a two-way data binding. So all the three that we have seen so far, the flow of the value from the component to the template or the property being assigned to a value or the event being assigned to a handler to handle the event. All these are what we refer to as one way data bindings because they flow only in one direction. You can also have bidirectional flow where you might also see it in the syntax what you would specify with square brackets. And then enclosed inside that with standard parenthesis. An inside there you will specifies something like an ngModel. You will see the use of this when it forms later on in the next module. So this is where you will assign a property to that. So in this case the information flow is bidirectional. So any change in your DOM will be reflected back into your property and the component. Any change in the component's property will be reflected back to the DOM. Note the specific syntax that we use for specifying the ngModel in this example here. We use a square bracket and inside that we use the standard parenthesis in there. Let me now summarize what we have just learned about the data binding in the previous slide in to this table. So in this table, we are showing the different ways that data binding is used. One-way data binding from the data source to the view target so from the component to the DOM, we are using a double brace expression inside there. This is what we refer to as Interpolation as an example of which, would be the dish name, enclosed inside the double braces as we have seen, used in the exercises, in the previous module. Then we have, the second kind where you enclose the target inside a square bracket and then assign it to an expression on the right side. These expressions could be JavaScript expressions with some limitations. The examples that we will normally see would be using a property from one of the classes there. So, this is what we referred as a property attribute, and example of which you will see in the exercise that's follows this lecture. Where you would see the use of a dish, enclosed inside a square bracket, being equated to a selectedDish, which is a variable declared inside a component. This can also be expressed using a bind-target, a way of expressing the same thing. So both these whether you enclose a target in square brackets or bind-target. So, for example, you can see bind-dish. So whichever way you express this, both refer to the same thing. So the Property Attribute being specified or the Class Style being specified. Now the one-way flow of information from the view target to the data source is usually expressed with the target enclosed inside parentheses here or can also be expressed as on-target. And at the right hand side would be a statement. A statement could be some kind of a JavaScript expression typically would be in the of invocation of a method inside a component. Well you will see an example in the exercise that follows where you would have click inside the parenthesis and assigned to onSelect. Which is a method described inside a component class there with a parameter dish being supplied to this method there. The two-way data binding as we saw would be with squire and parentheses, squire brackets and parentheses which is equated to an expression. We will see two-way data binding as a set with forms a little bit later where you will use something like an ngModel, enclosed inside the square brackets and parentheses, equated to something like dish.name. Which connects the form element to a property of a JavaScript object, in our component. You can also express this as bindon-target. Which is another way of saying the same thing. Now, this two-way data binding that we do is sometimes jocularly referred to as a banana in a box. So if you look at the square brackets with the parenthesis inside it, it looks like a banana in a box. So, you might see this being used In some of the documentation or in some of the blogs that you might read on the Internet. Expanding further on the binding targets that we have seen, the binding targets are the properties that are declared on the left side of the binding declaration of that data binding declaration. Typically, enclosed inside square brackets or inside parenthesis or both. So the right side of the binding expression is their binding sources, so which are typically like the properties of a JavaScript object, or a variable, or an expression that we define on the right hand side. If you define target properties associated with the selective of a component. That is one way of either passing in information into a component, or sending back information from one component to another component. So this facilitates communication between components. So you would see the use of a decorator like @Input associated with a way of sending information from one component to another component. We will see an example of this usage in the exercise that follows this lecture here. Similarly, you can use the Output decorator to specify an event from one component being passed back to another component. So both these usages are effectively used for communicating between components. [MUSIC]
