Now that we have examined data binding, let's make use of them for working on the Angular application that we have been using so far. In the previous version of the Angular application, we had the menu being rendered, and then we had a specific dish being shown at the bottom. Now, we would ideally like for the user to be able to click on any one of the menu items and then the details to be shown to the user. This is where the use of data binding will help us to implement our application to enable this kind of a feature. Going to the current state of our application in the browser, we can now see that we have our menu and at the bottom we have the details of one specific dish being shown there. Now, this is well and good for a start, but ideally, what we would like to have is that if the user clicks on any one of these dishes, we want to be able to show the details of the dish at the bottom of the menu here. So, we would like the details of the dish to be changed based upon which specific dish we click upon at any moment. So, how do we achieve this? So, this is where the use of data binding comes to our rescue. Going to our application, the first thing that I'm going to do is in the shared folder, now you realize that the dish information is being used both in the menu component as well as in the dish detail component. Now, when you have information being shared like this, it would be rather more convenient to have a centralized place from which this information is supplied to both these components. So to help me do that, what I'm going to do is go to the share folder and then create a new file, and then I will name this file as dishes.ts. Inside this dishes.ts file, I'm going to create the constant which supplies the details of the dishes. So to do that, I would first import the dish, from the dish class that I have already defined earlier. So now, I can define a constant called as dishes of the type a dish array, and then this is where I'm going to store the details of all my dishes. Now, in the earlier version of the application, we have seen the use of the dishes and we saw the JavaScript object array that contains the details of the dishes. Now, we're going to move all that content and with an updated version of it. So, an updated version of the dishes JavaScript object array is given to you in the instructions, so just go and copy the entire JavaScript object array from there and then we'll paste it into place here. So, this becomes the central location from which the dishes information is supplied to your application. I have now cut and pasted the details of the dish that are given in the exercise instructions into place here, and so I have four dishes pasted here one, two three, and four dishes pasted here, and each of those dishes contains of course the details of the specific dish and also comments for the dish. Now this way rendering the information in the dish detail template becomes straightforward for any one of these chosen dishes. Now, if you roll back you will see that there are some red lines here. The reason for these red lines is because when you look at the dish object in here, you will see that in the dish object we don't have a property there called as comments. So, we need to create a new property called comments to add into that dish here. So, how do we do that? So to do that, we will say comments and then I would say comment array here. Now immediately you realize that there is no comment array available to us, so we need to create that comment array. So, what I'm going to do is I'm going to create another JavaScript class which contains the details of the comment there. So to do that, first I will import comment from the comment class here. Now of course the red line immediately tells me that I don't have a comment class. So, how do we add a comment class? So going to the shared folder, we'll create a new file named comment.ts and inside this comment.ts, we'll define a class called comment here. Now, we need to define certain properties for this comment class. So, what are the properties that we have? Let's take a quick look at our dishes.ts file and then we'll see what the properties for each comment are. Going to the dishes.ts file, you see that the comments contains one property called as a rating which seems to be a number, then you have a comment which is a string and author which is a string and a date which is also a string. So, we need to define four properties for my comment class here. So, going back to the comment class, I would define rating as number. So, in type script, everything is a number here then we had comment which is a string author, which is also a string, and then date which is also a string here. So, these are the four properties that we have here. Now, obviously we have seen how we use the date string in the previous exercise, and in the assignment how we made use of the date string to show the date for the comment there. Now, in case you're wondering, what does this date string actually contain? Going here, you will see that this date string is with a certain format. So, this is the standard format for storing a date here. This date format is the ISO OSI way of specifying the date format. So, we're just going to use this, so this is a standardized format that is used also in many programming languages which allows you to store the data as a string here, so I'm just going to make use of it as such here. After making the changes to the dish.ts file like this here and then also adding in the comment class here, we now see that the dishes.ts file no longer has those red lines because the comment has been added in as an object array to my dish class here. So, this works fine so far. Now, how do we make use of this? Now to make use of this, we will go to the menu component.ts, and then here we have this constant defined here. Now, this is not the right way of doing it later on you will see me using a service for all this. So, let me cut out this constant from here completely and instead of using that constant, I am going to now import dishes from the shared folder here, shared dishes here. So, notice that this dishes folder is exporting the dishes constant here. So, that's the reason why we're able to make use of it. So going back to the dishes one here, I need to export this from here, so I would say export. Constant. So, when I do that, then in my menu component I can see that my dishes can be imported here correctly. Then, the rest of the code here will work just fine without any changes. You will see that if you save the values now and then you look at your web application in the browser, it will render just fine even after these changes. After saving all the changes that you have done so far in all the files, if you go and look at your web page, your web page renders just like before. Now, the second part of the problem. We want to be able to communicate. When we click on any one of these menu items, we want to be able to communicate that information so that the corresponding dish will be rendered here. So, this is where we're going to take the help of the data binding that we have learned so far. Going back to the menu components template file, what we are going to do is that for this "app-dishdetail" that you include at the bottom here, to add in the dish detail components template to the menu components template, we're going to add in a property called as Dish. Then, we will assign this to be "selectedDish." You will recall that the selected dish is a variable that we have defined in our menu components TypeScript file here. So, that way; that value of that selected dish will be passed in through this property dish here. Now, we will see how the dish detail component can retrieve this information and then make use of it well in the next step in the exercise. Now, while we are here, we'll also fix up the other issue that we need to deal with. That is, when any of the menu items is clicked, then it'll generate a click event and we want that information to be delivered to our menu component TypeScript file. So, to do that, we'll go into menu grid lists that we have defined here. For this grid tile here, what I'm going to do is to define the click event here. So, for the click event, what I'm going to do is I'm going to call on select method that I will define inside my menu component.ts file. To this onSelect method, I'm going to supply the dish as the parameter here. What is this dish? This dish is exactly this dish that you have selected in this "let dish of dishes" in the ngFor syntax here. So, that specific dish, out of the array of dishes that you've selected here, will be passed in as a parameter to this onSelect method, what we're going to implement in our menu component.ts file. So, now that we have done this, so this is the handler that needs to be implemented. Let's go to the menu component file and then fix up this file to implement this handler in there. So, when you do a click on any one of the menu items, then the corresponding handle will be called and the specific dish information will be passed in as a parameter here. Going to menu component.ts file, now, the selected dish will be assigned a value based upon which dish I select. So, I'm going to remove that part and then right below here, I'm going to implement the onSelect method here. So, for the onSelect method, this will obtain a parameter which is the dish parameter. When that dish parameter comes in, I'm going to assign this selectedDish equal to dish, the parameter that came in as the value for the onSelect method here. So, this is it. So, when you click on any one of those items in the menu, any one of the dishes in the menu, that dish information will be passed in through this and then the selected dish will be assigned to that dish object here. Now, we have how the information comes in from the DOM. The specific click will cause the dish information to be available to us and the selected dish will be assigned that value. Now, going back to the menu component HTML file, we see that we have already assigned this dish property to selectedDish. So, that way, that selected dish value is being passed in through this dish property to this app-dishdetail here. Now, how does my dish detail component get hold of this information? For that, we're going to go to the dish detail component and fix that. Going to the dish detail component, the first thing that I'm going to do is delete this dish constant from my dish detail component. I no longer need it. Now, when a property is being bound, like what we have seen in the menu component HTML file, then in my dish detail file, I can use another module called as the Input Module. Then, for this dish, I'm going to simply declare that as DISH. Now, this input module allows me to declare a decorator for this dish variable that I defined here, like this, at input with the parenthesis here to that dish here. Then, also, I need to import the dish class from shared dish here. So, with this, so what has happened is that I am making use of the input module. So, this is a way for you to supply information into a component from another component. You bind a property in the template of the other component as we saw in the menu component.html file, and then that will be available as input to this component by declaring a variable and then calling input decorator for that. Now, with this, let's save the changes to all the files that we have made and then have a look at the angular replication. Going to our browser, we see that in this Angular replication, nothing is being displayed here. Because right now, the selected dish, we have not selected any one of the dishes so also the selected dish is an empty object there. So, we use the ngIf in the template for the dish detail. So, taking a quick look at the dish details template, you have implemented this as part of your assignment. So, you should have used the ngIf with the dish for both the code, as well as the MD list there. So, if you do that, then when the dish is currently unselected, then nothing will be displayed at the bottom. But the moment I click on any one of the dishes, then you immediately see the details of the dish being displayed at the bottom here. Now I can select the second dish and then immediately, you'll notice that the dish details being displayed below is changed. So, anytime I click on any one of these dishes, the details of that specific dish, including the comments will be displayed at the bottom here. So, this is exactly what we want to achieve in this particular exercise. So, here, you have seen the use of data binding, three different kinds, including the event and event handler, and also you saw how we can make use of the input module to be able to retrieve information into a component coming in from another component. With this, we complete this exercise, where we have learned how to make use of various data binding features available in Angular to implement our application. This is a good time for you to do a git commit with the message data binding.
