1 00:00:00,000 --> 00:00:07,225 Now that we have examined data binding, 2 00:00:07,225 --> 00:00:10,275 let's make use of them for 3 00:00:10,275 --> 00:00:14,715 working on the Angular application that we have been using so far. 4 00:00:14,715 --> 00:00:17,504 In the previous version of the Angular application, 5 00:00:17,504 --> 00:00:20,190 we had the menu being rendered, 6 00:00:20,190 --> 00:00:24,655 and then we had a specific dish being shown at the bottom. 7 00:00:24,655 --> 00:00:28,770 Now, we would ideally like for the user to be able to click 8 00:00:28,770 --> 00:00:32,990 on any one of the menu items and then the details to be shown to the user. 9 00:00:32,990 --> 00:00:37,325 This is where the use of data binding will help us 10 00:00:37,325 --> 00:00:43,430 to implement our application to enable this kind of a feature. 11 00:00:43,430 --> 00:00:48,470 Going to the current state of our application in the browser, 12 00:00:48,470 --> 00:00:52,040 we can now see that we have our menu and at the bottom we 13 00:00:52,040 --> 00:00:56,370 have the details of one specific dish being shown there. 14 00:00:56,370 --> 00:01:01,625 Now, this is well and good for a start, but ideally, 15 00:01:01,625 --> 00:01:06,350 what we would like to have is that if the user clicks on any one of these dishes, 16 00:01:06,350 --> 00:01:12,585 we want to be able to show the details of the dish at the bottom of the menu here. 17 00:01:12,585 --> 00:01:17,165 So, we would like the details of the dish to be changed 18 00:01:17,165 --> 00:01:22,250 based upon which specific dish we click upon at any moment. 19 00:01:22,250 --> 00:01:24,100 So, how do we achieve this? 20 00:01:24,100 --> 00:01:28,355 So, this is where the use of data binding comes to our rescue. 21 00:01:28,355 --> 00:01:31,735 Going to our application, 22 00:01:31,735 --> 00:01:35,750 the first thing that I'm going to do is in the shared folder, 23 00:01:35,750 --> 00:01:39,800 now you realize that the dish information is being 24 00:01:39,800 --> 00:01:45,090 used both in the menu component as well as in the dish detail component. 25 00:01:45,090 --> 00:01:49,100 Now, when you have information being shared like this, 26 00:01:49,100 --> 00:01:53,120 it would be rather more convenient to have a centralized place 27 00:01:53,120 --> 00:01:57,170 from which this information is supplied to both these components. 28 00:01:57,170 --> 00:01:58,880 So to help me do that, 29 00:01:58,880 --> 00:02:03,470 what I'm going to do is go to the share folder and then create a new file, 30 00:02:03,470 --> 00:02:09,150 and then I will name this file as dishes.ts. 31 00:02:09,150 --> 00:02:11,540 Inside this dishes.ts file, 32 00:02:11,540 --> 00:02:16,840 I'm going to create the constant which supplies the details of the dishes. 33 00:02:16,840 --> 00:02:17,980 So to do that, 34 00:02:17,980 --> 00:02:27,380 I would first import the dish, 35 00:02:27,380 --> 00:02:34,400 from the dish class 36 00:02:34,400 --> 00:02:36,760 that I have already defined earlier. 37 00:02:36,760 --> 00:02:40,625 So now, I can define a 38 00:02:40,625 --> 00:02:48,230 constant called as dishes of the type a dish array, 39 00:02:48,230 --> 00:02:53,590 and then this is where I'm going to store the details of all my dishes. 40 00:02:53,590 --> 00:02:56,495 Now, in the earlier version of the application, 41 00:02:56,495 --> 00:03:00,500 we have seen the use of the dishes and we saw 42 00:03:00,500 --> 00:03:04,610 the JavaScript object array that contains the details of the dishes. 43 00:03:04,610 --> 00:03:09,830 Now, we're going to move all that content and with an updated version of it. 44 00:03:09,830 --> 00:03:12,485 So, an updated version of the dishes 45 00:03:12,485 --> 00:03:16,520 JavaScript object array is given to you in the instructions, 46 00:03:16,520 --> 00:03:18,065 so just go and copy 47 00:03:18,065 --> 00:03:22,760 the entire JavaScript object array from there and then we'll paste it into place here. 48 00:03:22,760 --> 00:03:25,625 So, this becomes the central location from which 49 00:03:25,625 --> 00:03:30,215 the dishes information is supplied to your application. 50 00:03:30,215 --> 00:03:34,610 I have now cut and pasted the details of 51 00:03:34,610 --> 00:03:39,770 the dish that are given in the exercise instructions into place here, 52 00:03:39,770 --> 00:03:43,640 and so I have four dishes pasted here one, 53 00:03:43,640 --> 00:03:46,030 two three, and four dishes pasted here, 54 00:03:46,030 --> 00:03:48,710 and each of those dishes contains of course 55 00:03:48,710 --> 00:03:52,560 the details of the specific dish and also comments for the dish. 56 00:03:52,560 --> 00:03:55,610 Now this way rendering the information in 57 00:03:55,610 --> 00:04:02,360 the dish detail template becomes straightforward for any one of these chosen dishes. 58 00:04:02,360 --> 00:04:09,130 Now, if you roll back you will see that there are some red lines here. 59 00:04:09,130 --> 00:04:16,700 The reason for these red lines is because when you look at the dish object in here, 60 00:04:16,700 --> 00:04:23,210 you will see that in the dish object we don't have a property there called as comments. 61 00:04:23,210 --> 00:04:26,060 So, we need to create a new property called 62 00:04:26,060 --> 00:04:30,480 comments to add into that dish here. So, how do we do that? 63 00:04:30,480 --> 00:04:35,060 So to do that, we will say comments and 64 00:04:35,060 --> 00:04:41,275 then I would say comment array here. 65 00:04:41,275 --> 00:04:47,690 Now immediately you realize that there is no comment array available to us, 66 00:04:47,690 --> 00:04:50,495 so we need to create that comment array. 67 00:04:50,495 --> 00:04:54,605 So, what I'm going to do is I'm going to create another JavaScript class 68 00:04:54,605 --> 00:04:59,090 which contains the details of the comment there. 69 00:04:59,090 --> 00:05:17,340 So to do that, first I will import comment from 70 00:05:17,340 --> 00:05:20,750 the comment class here. 71 00:05:20,750 --> 00:05:25,435 Now of course the red line immediately tells me that I don't have a comment class. 72 00:05:25,435 --> 00:05:27,375 So, how do we add a comment class? 73 00:05:27,375 --> 00:05:29,500 So going to the shared folder, 74 00:05:29,500 --> 00:05:37,940 we'll create a new file named comment.ts and inside this comment.ts, 75 00:05:37,940 --> 00:05:48,250 we'll define a class called comment here. 76 00:05:50,300 --> 00:05:55,695 Now, we need to define certain properties for this comment class. 77 00:05:55,695 --> 00:05:57,605 So, what are the properties that we have? 78 00:05:57,605 --> 00:06:00,890 Let's take a quick look at our dishes.ts file 79 00:06:00,890 --> 00:06:05,310 and then we'll see what the properties for each comment are. 80 00:06:06,170 --> 00:06:09,085 Going to the dishes.ts file, 81 00:06:09,085 --> 00:06:11,555 you see that the comments contains 82 00:06:11,555 --> 00:06:15,470 one property called as a rating which seems to be a number, 83 00:06:15,470 --> 00:06:18,110 then you have a comment which is a string and 84 00:06:18,110 --> 00:06:21,490 author which is a string and a date which is also a string. 85 00:06:21,490 --> 00:06:26,690 So, we need to define four properties for my comment class here. 86 00:06:26,690 --> 00:06:30,075 So, going back to the comment class, 87 00:06:30,075 --> 00:06:34,770 I would define rating as number. 88 00:06:34,770 --> 00:06:37,410 So, in type script, 89 00:06:37,410 --> 00:06:47,575 everything is a number here then we had comment which is a string author, 90 00:06:47,575 --> 00:06:49,480 which is also a string, 91 00:06:49,480 --> 00:06:56,500 and then date which is also a string here. 92 00:06:56,500 --> 00:07:01,130 So, these are the four properties that we have here. 93 00:07:01,130 --> 00:07:09,620 Now, obviously we have seen how we use the date string in the previous exercise, 94 00:07:09,620 --> 00:07:13,040 and in the assignment how we made use of 95 00:07:13,040 --> 00:07:17,410 the date string to show the date for the comment there. 96 00:07:17,410 --> 00:07:19,755 Now, in case you're wondering, 97 00:07:19,755 --> 00:07:22,540 what does this date string actually contain? 98 00:07:22,540 --> 00:07:28,260 Going here, you will see that this date string is with a certain format. 99 00:07:28,260 --> 00:07:32,165 So, this is the standard format for storing a date here. 100 00:07:32,165 --> 00:07:38,230 This date format is the ISO OSI way of specifying the date format. 101 00:07:38,230 --> 00:07:39,775 So, we're just going to use this, 102 00:07:39,775 --> 00:07:42,670 so this is a standardized format that is used also in 103 00:07:42,670 --> 00:07:48,430 many programming languages which allows you to store the data as a string here, 104 00:07:48,430 --> 00:07:51,500 so I'm just going to make use of it as such here. 105 00:07:51,500 --> 00:07:55,405 After making the changes to the 106 00:07:55,405 --> 00:08:02,230 dish.ts file like this here and then also adding in the comment class here, 107 00:08:02,230 --> 00:08:08,420 we now see that the dishes.ts file no longer has those red lines because 108 00:08:08,420 --> 00:08:18,325 the comment has been added in as an object array to my dish class here. 109 00:08:18,325 --> 00:08:22,470 So, this works fine so far. 110 00:08:22,470 --> 00:08:24,530 Now, how do we make use of this? 111 00:08:24,530 --> 00:08:25,935 Now to make use of this, 112 00:08:25,935 --> 00:08:28,755 we will go to the menu component.ts, 113 00:08:28,755 --> 00:08:32,050 and then here we have this constant defined here. 114 00:08:32,050 --> 00:08:34,760 Now, this is not the right way of doing it 115 00:08:34,760 --> 00:08:38,845 later on you will see me using a service for all this. 116 00:08:38,845 --> 00:08:49,075 So, let me cut out this constant from here completely and instead of using that constant, 117 00:08:49,075 --> 00:08:54,880 I am going to now import dishes 118 00:08:54,880 --> 00:09:01,600 from the shared folder 119 00:09:01,600 --> 00:09:07,225 here, shared dishes here. 120 00:09:07,225 --> 00:09:12,875 So, notice that this dishes folder is exporting the dishes constant here. 121 00:09:12,875 --> 00:09:17,250 So, that's the reason why we're able to make use of it. 122 00:09:17,250 --> 00:09:20,080 So going back to the dishes one here, 123 00:09:20,080 --> 00:09:22,600 I need to export this from here, 124 00:09:22,600 --> 00:09:25,500 so I would say export. 125 00:09:25,500 --> 00:09:28,285 Constant. So, when I do that, 126 00:09:28,285 --> 00:09:33,985 then in my menu component I can see that my dishes can be imported here correctly. 127 00:09:33,985 --> 00:09:40,150 Then, the rest of the code here will work just fine without any changes. 128 00:09:40,500 --> 00:09:46,190 You will see that if you save the values now 129 00:09:46,190 --> 00:09:51,190 and then you look at your web application in the browser, 130 00:09:51,190 --> 00:09:55,655 it will render just fine even after these changes. 131 00:09:55,655 --> 00:10:00,110 After saving all the changes that you have done so far in all the files, 132 00:10:00,110 --> 00:10:01,810 if you go and look at your web page, 133 00:10:01,810 --> 00:10:05,360 your web page renders just like before. 134 00:10:05,360 --> 00:10:09,025 Now, the second part of the problem. 135 00:10:09,025 --> 00:10:11,390 We want to be able to communicate. 136 00:10:11,390 --> 00:10:15,640 When we click on any one of these menu items, 137 00:10:15,640 --> 00:10:18,415 we want to be able to communicate that information so that 138 00:10:18,415 --> 00:10:21,640 the corresponding dish will be rendered here. 139 00:10:21,640 --> 00:10:23,620 So, this is where we're going to take the help of 140 00:10:23,620 --> 00:10:27,100 the data binding that we have learned so far. 141 00:10:27,100 --> 00:10:33,505 Going back to the menu components template file, 142 00:10:33,505 --> 00:10:36,600 what we are going to do is that for 143 00:10:36,600 --> 00:10:41,675 this "app-dishdetail" that you include at the bottom here, 144 00:10:41,675 --> 00:10:48,570 to add in the dish detail components template to the menu components template, 145 00:10:48,570 --> 00:10:53,440 we're going to add in a property called as Dish. 146 00:10:53,440 --> 00:10:59,520 Then, we will assign this to be "selectedDish." 147 00:10:59,520 --> 00:11:03,550 You will recall that the selected dish is a variable that we have 148 00:11:03,550 --> 00:11:08,385 defined in our menu components TypeScript file here. 149 00:11:08,385 --> 00:11:12,020 So, that way; that value of that selected dish will 150 00:11:12,020 --> 00:11:15,905 be passed in through this property dish here. 151 00:11:15,905 --> 00:11:20,860 Now, we will see how the dish detail component can retrieve this information 152 00:11:20,860 --> 00:11:25,670 and then make use of it well in the next step in the exercise. 153 00:11:25,670 --> 00:11:27,655 Now, while we are here, 154 00:11:27,655 --> 00:11:33,345 we'll also fix up the other issue that we need to deal with. 155 00:11:33,345 --> 00:11:40,155 That is, when any of the menu items is clicked, 156 00:11:40,155 --> 00:11:44,215 then it'll generate a click event and we want that information to be 157 00:11:44,215 --> 00:11:49,475 delivered to our menu component TypeScript file. 158 00:11:49,475 --> 00:11:56,960 So, to do that, we'll go into menu grid lists that we have defined here. 159 00:11:56,960 --> 00:11:59,395 For this grid tile here, 160 00:11:59,395 --> 00:12:04,945 what I'm going to do is to define the click event here. 161 00:12:04,945 --> 00:12:06,910 So, for the click event, 162 00:12:06,910 --> 00:12:11,870 what I'm going to do is I'm going to call on 163 00:12:11,870 --> 00:12:19,005 select method that I will define inside my menu component.ts file. 164 00:12:19,005 --> 00:12:20,880 To this onSelect method, 165 00:12:20,880 --> 00:12:25,975 I'm going to supply the dish as the parameter here. 166 00:12:25,975 --> 00:12:27,315 What is this dish? 167 00:12:27,315 --> 00:12:30,670 This dish is exactly this dish that you have selected in 168 00:12:30,670 --> 00:12:35,785 this "let dish of dishes" in the ngFor syntax here. 169 00:12:35,785 --> 00:12:38,290 So, that specific dish, 170 00:12:38,290 --> 00:12:41,390 out of the array of dishes that you've selected here, 171 00:12:41,390 --> 00:12:45,980 will be passed in as a parameter to this onSelect method, 172 00:12:45,980 --> 00:12:50,555 what we're going to implement in our menu component.ts file. 173 00:12:50,555 --> 00:12:52,465 So, now that we have done this, 174 00:12:52,465 --> 00:12:56,175 so this is the handler that needs to be implemented. 175 00:12:56,175 --> 00:12:59,960 Let's go to the menu component file and then fix up 176 00:12:59,960 --> 00:13:04,195 this file to implement this handler in there. 177 00:13:04,195 --> 00:13:08,490 So, when you do a click on any one of the menu items, 178 00:13:08,490 --> 00:13:10,695 then the corresponding handle will be called and 179 00:13:10,695 --> 00:13:15,605 the specific dish information will be passed in as a parameter here. 180 00:13:15,605 --> 00:13:19,790 Going to menu component.ts file, now, 181 00:13:19,790 --> 00:13:25,545 the selected dish will be assigned a value based upon which dish I select. 182 00:13:25,545 --> 00:13:29,600 So, I'm going to remove that part and then right below here, 183 00:13:29,600 --> 00:13:34,660 I'm going to implement the onSelect method here. 184 00:13:34,660 --> 00:13:37,715 So, for the onSelect method, 185 00:13:37,715 --> 00:13:45,525 this will obtain a parameter which is the dish parameter. 186 00:13:45,525 --> 00:13:47,820 When that dish parameter comes in, 187 00:13:47,820 --> 00:13:55,705 I'm going to assign this selectedDish equal to dish, 188 00:13:55,705 --> 00:14:02,420 the parameter that came in as the value for the onSelect method here. 189 00:14:02,420 --> 00:14:03,895 So, this is it. 190 00:14:03,895 --> 00:14:08,410 So, when you click on any one of those items in the menu, 191 00:14:08,410 --> 00:14:10,780 any one of the dishes in the menu, 192 00:14:10,780 --> 00:14:15,090 that dish information will be passed in through this and then 193 00:14:15,090 --> 00:14:20,670 the selected dish will be assigned to that dish object here. 194 00:14:20,670 --> 00:14:25,415 Now, we have how the information comes in from the DOM. 195 00:14:25,415 --> 00:14:29,280 The specific click will cause the dish information to 196 00:14:29,280 --> 00:14:33,875 be available to us and the selected dish will be assigned that value. 197 00:14:33,875 --> 00:14:38,755 Now, going back to the menu component HTML file, 198 00:14:38,755 --> 00:14:45,240 we see that we have already assigned this dish property to selectedDish. 199 00:14:45,240 --> 00:14:48,730 So, that way, that selected dish value is being passed 200 00:14:48,730 --> 00:14:53,980 in through this dish property to this app-dishdetail here. 201 00:14:53,980 --> 00:14:57,990 Now, how does my dish detail component get hold of this information? 202 00:14:57,990 --> 00:15:02,225 For that, we're going to go to the dish detail component and fix that. 203 00:15:02,225 --> 00:15:05,185 Going to the dish detail component, 204 00:15:05,185 --> 00:15:08,395 the first thing that I'm going to do is delete 205 00:15:08,395 --> 00:15:13,370 this dish constant from my dish detail component. 206 00:15:13,370 --> 00:15:14,985 I no longer need it. 207 00:15:14,985 --> 00:15:18,490 Now, when a property is being bound, 208 00:15:18,490 --> 00:15:22,715 like what we have seen in the menu component HTML file, 209 00:15:22,715 --> 00:15:25,900 then in my dish detail file, 210 00:15:25,900 --> 00:15:32,035 I can use another module called as the Input Module. 211 00:15:32,035 --> 00:15:35,505 Then, for this dish, 212 00:15:35,505 --> 00:15:39,555 I'm going to simply declare that as DISH. 213 00:15:39,555 --> 00:15:45,095 Now, this input module allows me to declare a decorator 214 00:15:45,095 --> 00:15:50,905 for this dish variable that I defined here, 215 00:15:50,905 --> 00:15:57,800 like this, at input with the parenthesis here to that dish here. 216 00:15:57,800 --> 00:16:01,025 Then, also, I need to import 217 00:16:01,025 --> 00:16:10,010 the dish class 218 00:16:10,010 --> 00:16:18,975 from shared dish here. 219 00:16:18,975 --> 00:16:24,610 So, with this, so what has happened is that I am making use of the input module. 220 00:16:24,610 --> 00:16:30,655 So, this is a way for you to supply information into a component from another component. 221 00:16:30,655 --> 00:16:33,650 You bind a property in the template of 222 00:16:33,650 --> 00:16:37,460 the other component as we saw in the menu component.html file, 223 00:16:37,460 --> 00:16:41,550 and then that will be available as input to this component by 224 00:16:41,550 --> 00:16:47,070 declaring a variable and then calling input decorator for that. 225 00:16:47,070 --> 00:16:51,400 Now, with this, let's save the changes to all the files that we have made 226 00:16:51,400 --> 00:16:56,990 and then have a look at the angular replication. 227 00:16:56,990 --> 00:17:00,140 Going to our browser, 228 00:17:00,140 --> 00:17:02,260 we see that in this Angular replication, 229 00:17:02,260 --> 00:17:04,000 nothing is being displayed here. 230 00:17:04,000 --> 00:17:07,470 Because right now, the selected dish, 231 00:17:07,470 --> 00:17:11,120 we have not selected any one of the dishes so also the selected dish 232 00:17:11,120 --> 00:17:14,985 is an empty object there. 233 00:17:14,985 --> 00:17:23,050 So, we use the ngIf in the template for the dish detail. 234 00:17:23,050 --> 00:17:27,765 So, taking a quick look at the dish details template, 235 00:17:27,765 --> 00:17:31,810 you have implemented this as part of your assignment. 236 00:17:31,810 --> 00:17:38,315 So, you should have used the ngIf with the dish for both the code, 237 00:17:38,315 --> 00:17:41,400 as well as the MD list there. 238 00:17:41,400 --> 00:17:44,125 So, if you do that, 239 00:17:44,125 --> 00:17:47,705 then when the dish is currently unselected, 240 00:17:47,705 --> 00:17:50,175 then nothing will be displayed at the bottom. 241 00:17:50,175 --> 00:17:53,255 But the moment I click on any one of the dishes, 242 00:17:53,255 --> 00:17:58,005 then you immediately see the details of the dish being displayed at the bottom here. 243 00:17:58,005 --> 00:18:00,840 Now I can select the second dish and then immediately, 244 00:18:00,840 --> 00:18:06,000 you'll notice that the dish details being displayed below is changed. 245 00:18:06,000 --> 00:18:09,090 So, anytime I click on any one of these dishes, 246 00:18:09,090 --> 00:18:11,505 the details of that specific dish, 247 00:18:11,505 --> 00:18:15,670 including the comments will be displayed at the bottom here. 248 00:18:15,670 --> 00:18:20,710 So, this is exactly what we want to achieve in this particular exercise. 249 00:18:20,710 --> 00:18:27,855 So, here, you have seen the use of data binding, three different kinds, 250 00:18:27,855 --> 00:18:31,970 including the event and event handler, 251 00:18:31,970 --> 00:18:37,110 and also you saw how we can make use of the input module to be able 252 00:18:37,110 --> 00:18:42,855 to retrieve information into a component coming in from another component. 253 00:18:42,855 --> 00:18:45,820 With this, we complete this exercise, 254 00:18:45,820 --> 00:18:48,750 where we have learned how to make use of various data 255 00:18:48,750 --> 00:18:56,005 binding features available in Angular to implement our application. 256 00:18:56,005 --> 00:19:02,010 This is a good time for you to do a git commit with the message data binding.