1 00:00:03,680 --> 00:00:07,095 Let's now continue to work on 2 00:00:07,095 --> 00:00:12,080 the single page application that we have been developing in our exercises. 3 00:00:12,080 --> 00:00:16,480 So far, we have integrated the home component, 4 00:00:16,480 --> 00:00:23,610 the menu component, and the contact component into our single page application. 5 00:00:23,610 --> 00:00:29,080 The dish detail component currently is being used at the bottom of the menu component. 6 00:00:29,080 --> 00:00:32,020 So, when you click on any of the items in the menu, 7 00:00:32,020 --> 00:00:35,450 the details of the dish are displayed right below in the menu. 8 00:00:35,450 --> 00:00:40,290 Now, we're going to leverage another support that the Angular router module provides, 9 00:00:40,290 --> 00:00:47,820 which enables us to define a route with a parameter included in the route definition. 10 00:00:47,820 --> 00:00:52,520 This way, we can pass information to another component, 11 00:00:52,520 --> 00:00:53,880 and then from there, 12 00:00:53,880 --> 00:00:56,175 display information in the other component. 13 00:00:56,175 --> 00:00:57,770 How does this work? 14 00:00:57,770 --> 00:01:01,770 Let's learn that by doing this exercise. 15 00:01:01,770 --> 00:01:04,755 So, getting back to our application, 16 00:01:04,755 --> 00:01:08,140 in this application, when you look at the menu, 17 00:01:08,140 --> 00:01:10,205 when you click on any item in the menu, 18 00:01:10,205 --> 00:01:15,920 the details of the selected item are displayed right below in the menu. 19 00:01:15,920 --> 00:01:19,940 Now, I would want to separate the view of the details 20 00:01:19,940 --> 00:01:24,795 of this particular dish into its own separate view. 21 00:01:24,795 --> 00:01:27,235 When I click on any one of these, 22 00:01:27,235 --> 00:01:30,360 I want to be able to display the details of the dish, 23 00:01:30,360 --> 00:01:34,780 specifically in a view in this application. 24 00:01:34,780 --> 00:01:39,235 To achieve that, we're going to take advantage, as I said, 25 00:01:39,235 --> 00:01:43,985 with the route parameters to enable 26 00:01:43,985 --> 00:01:48,220 us to support that kind of a behavior in our application. 27 00:01:48,220 --> 00:01:50,050 How do we go about doing that? 28 00:01:50,050 --> 00:01:57,025 Let's do that by starting out with defining a new route with a parameter here. 29 00:01:57,025 --> 00:02:00,305 To make use of the dish detail component, 30 00:02:00,305 --> 00:02:02,455 we will go into the routes, 31 00:02:02,455 --> 00:02:06,850 and then define a new route after menu here. 32 00:02:06,850 --> 00:02:10,010 Look at the way the route is defined here. 33 00:02:10,010 --> 00:02:16,595 So, this is path, dishdetail. 34 00:02:16,595 --> 00:02:20,225 So, this dish detail is part of the dish detail component. 35 00:02:20,225 --> 00:02:22,190 So, it has its own view. 36 00:02:22,190 --> 00:02:25,330 Now, I want to be able to navigate to that view, 37 00:02:25,330 --> 00:02:27,890 but with a parameter ID, 38 00:02:27,890 --> 00:02:33,750 because this dish detail view might display any one of the dishes in my menu. 39 00:02:33,750 --> 00:02:38,790 So, I want to be able to display a selected dish in the dish detail. 40 00:02:38,790 --> 00:02:40,710 Now, that's selected dish will have an ID, 41 00:02:40,710 --> 00:02:45,879 and I want to pass that ID into my dish detailed components, 42 00:02:45,879 --> 00:02:50,025 so that it can render the details of that particular dish. 43 00:02:50,025 --> 00:02:53,480 So, in Angular router, 44 00:02:53,480 --> 00:02:59,150 it supports passing in parameters by defining route parameters like this, 45 00:02:59,150 --> 00:03:02,220 in the definition of the router itself. 46 00:03:02,220 --> 00:03:03,260 So, within the path, 47 00:03:03,260 --> 00:03:04,525 if I say colon, 48 00:03:04,525 --> 00:03:10,050 so that colon can be followed by a name which will act as a route parameter. 49 00:03:10,050 --> 00:03:14,650 So, in this case, I'm going to use the parameter name as an ID. 50 00:03:14,650 --> 00:03:21,165 This ID refers to the dish ID that we have already given to each of our dishes. 51 00:03:21,165 --> 00:03:27,055 Now, this will take me to the dish detail component. 52 00:03:27,055 --> 00:03:35,040 So, we'll add in this new route to our Angular route definition here. 53 00:03:35,040 --> 00:03:36,565 Save the changes. 54 00:03:36,565 --> 00:03:39,960 Now, in the menu component, 55 00:03:39,960 --> 00:03:45,805 so when I open the menu components template file, 56 00:03:45,805 --> 00:03:47,470 in the menu component, 57 00:03:47,470 --> 00:03:50,350 I am displaying the dish at the bottom here. 58 00:03:50,350 --> 00:03:51,625 So, I don't want to do that. 59 00:03:51,625 --> 00:03:57,335 So, I'm going to delete that part from my menu components template. 60 00:03:57,335 --> 00:04:01,630 Instead, what I realize is that right there, 61 00:04:01,630 --> 00:04:05,015 I am able to access the particular dish. 62 00:04:05,015 --> 00:04:07,680 So, when the dish is clicked, 63 00:04:07,680 --> 00:04:10,080 instead of doing this click here, 64 00:04:10,080 --> 00:04:13,490 so I'm going to remove this click here, and instead, 65 00:04:13,490 --> 00:04:23,940 I'm going to define a new parameter here called a routerLink. 66 00:04:25,790 --> 00:04:30,710 You'll see the use of the routerLink here. 67 00:04:30,710 --> 00:04:37,460 Now, this routerLink takes in values which you can supply in your template like this. 68 00:04:37,460 --> 00:04:42,190 So, you can supply that as an array here. 69 00:04:42,190 --> 00:04:49,550 Within the array, you can supply two parts of an array. 70 00:04:49,550 --> 00:04:51,195 So, dishdetail. 71 00:04:51,195 --> 00:04:55,360 So, you saw that when I defined the route, I said "/dishdetail/:id." 72 00:04:56,560 --> 00:05:03,320 So, the Angular router will pass in whatever parameter that I supply 73 00:05:03,320 --> 00:05:09,340 here as part of the second part of that URL there. 74 00:05:09,340 --> 00:05:11,700 So, now, along with the dish detail, 75 00:05:11,700 --> 00:05:15,820 I'm going to construct my routerLink using dish detail, 76 00:05:15,820 --> 00:05:19,165 and also the dish ID here. 77 00:05:19,165 --> 00:05:22,580 So, this dish ID refer to the specific dish that I have 78 00:05:22,580 --> 00:05:26,710 selected from the array of dishes here. 79 00:05:26,710 --> 00:05:27,950 So, that dish ID, 80 00:05:27,950 --> 00:05:29,830 I have access to it here. 81 00:05:29,830 --> 00:05:38,120 So, I'm going to use that as the second part inside this array of parameters, 82 00:05:38,120 --> 00:05:41,025 that I'm going to pass in for my routerLink here. 83 00:05:41,025 --> 00:05:42,970 So, if I define it like this, 84 00:05:42,970 --> 00:05:48,270 then when I click on that particular item in my menu, 85 00:05:48,270 --> 00:05:51,030 then that detailed, the dish ID, 86 00:05:51,030 --> 00:05:53,385 together with this dishdetail, 87 00:05:53,385 --> 00:05:55,285 will be passed in as the router link. 88 00:05:55,285 --> 00:05:59,765 So, that information will now become available through 89 00:05:59,765 --> 00:06:04,600 my Angular routers to my dish detail components. 90 00:06:04,600 --> 00:06:09,850 So, the router enables the dish detail component to retrieve this value, 91 00:06:09,850 --> 00:06:15,060 dish ID, from the Angular route when this information is passed into it. 92 00:06:15,060 --> 00:06:16,880 How do we do that? For that, 93 00:06:16,880 --> 00:06:22,670 we need to go to the dish detail component and fix that up to receive this information. 94 00:06:22,670 --> 00:06:27,945 So, after making these changes to the menu component, 95 00:06:27,945 --> 00:06:34,090 let's now switch to the dish detail component. 96 00:06:34,300 --> 00:06:37,610 Inside the dish detail component, 97 00:06:37,610 --> 00:06:39,950 you see that currently, 98 00:06:39,950 --> 00:06:43,670 I was receiving the dish as an input here. 99 00:06:43,670 --> 00:06:46,655 I am no longer going to receive the dishes and input. 100 00:06:46,655 --> 00:06:50,295 So, I will just leave that as such, 101 00:06:50,295 --> 00:06:51,910 as simply a dish. 102 00:06:51,910 --> 00:06:58,220 I no longer need the input because I am not passing in this information using the dish, 103 00:06:58,220 --> 00:07:01,625 within square brackets that I included in my menu component. 104 00:07:01,625 --> 00:07:07,550 Instead, this information about the specific dishes coming in through the Angular router. 105 00:07:07,550 --> 00:07:11,595 How do I get access to that dish ID? 106 00:07:11,595 --> 00:07:13,050 So, to do that, 107 00:07:13,050 --> 00:07:14,870 I go in here. 108 00:07:14,870 --> 00:07:24,720 Into this application, I'm going to add in two more imports here, 109 00:07:24,720 --> 00:07:27,480 one of them called Params. 110 00:07:27,480 --> 00:07:30,560 So, this Params gives me access to 111 00:07:30,560 --> 00:07:35,315 the router parameters that are available when I come in. 112 00:07:35,315 --> 00:07:42,855 So, this is from the Angular router, Params, 113 00:07:42,855 --> 00:07:51,510 and also another one that I need is the Location. 114 00:07:51,510 --> 00:07:57,710 Location enables me to track the location of 115 00:07:57,710 --> 00:08:04,060 my page in the history of my browser. 116 00:08:04,060 --> 00:08:11,185 So, that would be useful for me to navigate back from my dish detail when I need to. 117 00:08:11,185 --> 00:08:14,440 You will see me using that a little bit later. 118 00:08:14,440 --> 00:08:19,255 So, two things that I need to import: Params and Location. 119 00:08:19,255 --> 00:08:23,799 We will see how we make use of these two in our application. 120 00:08:23,799 --> 00:08:25,430 So, along with this, 121 00:08:25,430 --> 00:08:29,420 we will go in and in here, for the constructor, 122 00:08:29,420 --> 00:08:39,320 now we note that the dish value is now not available from my menu component. 123 00:08:39,320 --> 00:08:43,650 But instead, I have to explicitly go and fetch this from the DishService. 124 00:08:43,650 --> 00:08:45,405 So, I'm going to import 125 00:08:45,405 --> 00:08:56,020 the DishService also into my dish detail component. 126 00:09:01,330 --> 00:09:03,960 DishService here. 127 00:09:03,960 --> 00:09:09,820 So, this will enable me to go and fetch a specific dish from the Dish Service. 128 00:09:09,820 --> 00:09:11,930 So, you recall that we already have 129 00:09:11,930 --> 00:09:15,855 the getDish method and the Dish Service which we can use. 130 00:09:15,855 --> 00:09:20,320 Now, the next important thing for us is to get hold of the dish id. 131 00:09:20,320 --> 00:09:22,800 Now, how do we get hold of the dish id. 132 00:09:22,800 --> 00:09:25,665 So, this is where in the constructor. 133 00:09:25,665 --> 00:09:29,075 Now, I need to make all these services available, 134 00:09:29,075 --> 00:09:31,230 so I will say Dish Service. 135 00:09:31,230 --> 00:09:46,250 Then, the other one is Location. 136 00:09:46,270 --> 00:09:51,275 So, Location is another service that is available to me. 137 00:09:51,275 --> 00:09:56,010 So, both of these will be used within my application. 138 00:09:56,010 --> 00:09:59,325 So, when this dish component is initialized, 139 00:09:59,325 --> 00:10:01,890 then at this point in the ngOnInit, 140 00:10:01,890 --> 00:10:08,490 I can go and fetch the information about the specific dish from the Params. 141 00:10:08,490 --> 00:10:13,120 So, how do we do that? So, we do let id. 142 00:10:13,120 --> 00:10:15,800 So, this is where I'm going to fetch the id, 143 00:10:15,800 --> 00:10:19,370 so I would say plus this. 144 00:10:19,370 --> 00:10:23,760 Also to fetch the route value, 145 00:10:23,760 --> 00:10:30,565 I need to inject another service called ActivatedRoute service. 146 00:10:30,565 --> 00:10:32,740 That is part of the Angular routers. 147 00:10:32,740 --> 00:10:39,970 So this ActivatedRoute service provides me with access to the route here. 148 00:10:39,970 --> 00:10:41,940 So, I would say, 149 00:10:41,940 --> 00:10:47,770 so along with the DishService I also need to define one more called 150 00:10:47,770 --> 00:10:54,305 as route which would be the ActivatedRoute service here. 151 00:10:54,305 --> 00:10:56,890 So, all these three will be available to me. 152 00:10:56,890 --> 00:11:00,265 So right there, I can ask for 153 00:11:00,265 --> 00:11:10,840 this route, Snapshot, Params. 154 00:11:10,840 --> 00:11:18,500 This Params is an array to 155 00:11:18,500 --> 00:11:25,760 which I can index using the id as the value, so Params id. 156 00:11:25,760 --> 00:11:30,340 This fetches me the id from the parameter. 157 00:11:30,340 --> 00:11:34,750 So, when I define this URL, 158 00:11:34,750 --> 00:11:41,070 the URL for this would be defined as Dishdetail. 159 00:11:41,070 --> 00:11:43,320 For example, DishDetail 0, 160 00:11:43,320 --> 00:11:47,760 DishDetail 1, DishDetail 2, and so on. 161 00:11:47,760 --> 00:11:54,060 So, that's how the URLs for these components are going to be defined there. 162 00:11:54,060 --> 00:11:56,520 So, that value I am going to fetch in here. 163 00:11:56,520 --> 00:11:59,950 Now, once I get hold of the idea of the dish, then I can say, 164 00:11:59,950 --> 00:12:08,125 this dish equal to DishService 165 00:12:08,125 --> 00:12:17,915 and get dish and the getDish will take the id as the parameter here. 166 00:12:17,915 --> 00:12:22,825 So, with this, when I click on a dish in my menu component, 167 00:12:22,825 --> 00:12:26,410 that link that I have the router link that I have setup there, 168 00:12:26,410 --> 00:12:31,770 will pass in the dish id to my Router as RouterParameter, 169 00:12:31,770 --> 00:12:34,525 and that will become available to me in 170 00:12:34,525 --> 00:12:40,380 my DishDetail component by accessing the ActivatedRoute service here. 171 00:12:40,380 --> 00:12:42,515 So, once I get hold of it, 172 00:12:42,515 --> 00:12:46,820 then I can use that value to query the dish here. 173 00:12:46,820 --> 00:12:50,630 Now, this is not the complete way of doing things. 174 00:12:50,630 --> 00:12:53,080 Later on in the next module, 175 00:12:53,080 --> 00:12:56,120 we're going to use something called Reactive JavaScript. 176 00:12:56,120 --> 00:12:59,640 Then, at that point, I will come back to redefine this in 177 00:12:59,640 --> 00:13:04,870 a different way so that my DishDetail component can keep track of 178 00:13:04,870 --> 00:13:09,120 any changes that I make to my URL and 179 00:13:09,120 --> 00:13:14,515 automatically change the information that is being displayed by this component. 180 00:13:14,515 --> 00:13:19,445 We'll come to that in one of the later exercises in the next module, 181 00:13:19,445 --> 00:13:23,890 but this works fine for the moment so we're going to use this. 182 00:13:23,890 --> 00:13:27,070 In addition, now when I go to the details of the dish 183 00:13:27,070 --> 00:13:30,335 I want to be able to get back to the menu from the dish. 184 00:13:30,335 --> 00:13:36,135 So, I'm going to add in a back button into my card a back button into my card, 185 00:13:36,135 --> 00:13:41,905 which when pressed will take me back to the previous location in my browser. 186 00:13:41,905 --> 00:13:48,230 So, to do that I'm going to add in a method here called GoBack, 187 00:13:50,020 --> 00:13:57,280 which will essentially do make use 188 00:13:57,280 --> 00:14:03,735 of the Location service that I've included up here. 189 00:14:03,735 --> 00:14:09,300 The Location service provides a method called Back that allows me to go 190 00:14:09,300 --> 00:14:15,000 back into the previous item in the browser history. 191 00:14:15,000 --> 00:14:19,890 So, that way, I will navigate back to the menu from the details here. 192 00:14:19,890 --> 00:14:22,430 So, this GoBack method is added in here. 193 00:14:22,430 --> 00:14:28,160 Now, we need to go and fix up the DishDetail component here. 194 00:14:28,160 --> 00:14:32,390 So, in the DishDetail components template file, 195 00:14:32,390 --> 00:14:36,950 here we have two buttons that are Like and Share button. 196 00:14:36,950 --> 00:14:40,040 I'm going to add in one more button here. 197 00:14:42,920 --> 00:14:47,155 For this button, I would add in, 198 00:14:47,155 --> 00:14:49,220 if this button is clicked, 199 00:14:49,220 --> 00:14:55,330 this will result in a call to the GoBack method that I 200 00:14:55,330 --> 00:15:03,430 have just added to my DishDetail component.tsfile. 201 00:15:03,430 --> 00:15:10,555 So, this would be a Back button there. 202 00:15:10,555 --> 00:15:12,625 While we're at it, 203 00:15:12,625 --> 00:15:16,540 we might as well fix the Footer components links also. 204 00:15:16,540 --> 00:15:22,645 So, going to the footercomponent.htmlfile at the bottom here where we have this links, 205 00:15:22,645 --> 00:15:29,785 I'm going to add in the RouterLink here with 206 00:15:29,785 --> 00:15:38,110 the parameter home for the first one, 207 00:15:38,110 --> 00:15:47,390 and then menu for the second one, 208 00:15:51,240 --> 00:16:00,330 and contact us for the third one in the Footer here. 209 00:16:00,330 --> 00:16:02,710 Let's save the changes. 210 00:16:02,710 --> 00:16:04,785 Going to your application, 211 00:16:04,785 --> 00:16:06,615 if you now click on the menu, 212 00:16:06,615 --> 00:16:09,195 the menu items are shown here. 213 00:16:09,195 --> 00:16:11,895 If we click on any one of the menu items, 214 00:16:11,895 --> 00:16:20,585 you would notice that the details of the dish are shown in a separate view here. 215 00:16:20,585 --> 00:16:22,900 This details, as you can see, 216 00:16:22,900 --> 00:16:26,450 this is exactly what the DishDetail component was displaying earlier, 217 00:16:26,450 --> 00:16:29,620 but at the bottom of the menu in the menu component, 218 00:16:29,620 --> 00:16:33,260 we now have that displaying in a separate view. 219 00:16:33,260 --> 00:16:35,760 Now, this DishDetail component, 220 00:16:35,760 --> 00:16:39,290 now you can go back to the menu by clicking on the Back button. 221 00:16:39,290 --> 00:16:40,670 So, when you click on the Back button, 222 00:16:40,670 --> 00:16:41,690 you're back at the menu. 223 00:16:41,690 --> 00:16:43,490 When you click on another item, 224 00:16:43,490 --> 00:16:47,575 you see that the details of that particular item is being displayed here, 225 00:16:47,575 --> 00:16:51,560 similarly for the third too and then you can go back. 226 00:16:51,560 --> 00:16:54,645 Now, when you click on any one of these items, 227 00:16:54,645 --> 00:17:02,780 note the value of the URL in the address bar. 228 00:17:02,780 --> 00:17:08,565 So, this is local host 4,200 slash DishDetail slash 0. 229 00:17:08,565 --> 00:17:12,080 This zero is the id of this dish. 230 00:17:12,080 --> 00:17:14,630 So, that value is being passed in, 231 00:17:14,630 --> 00:17:19,985 and that is how the DishDetail component here is being shown here, go back. 232 00:17:19,985 --> 00:17:21,540 When you click on the other item, 233 00:17:21,540 --> 00:17:27,750 you can see that now in the URLs says, DishDetail slash 1. 234 00:17:27,750 --> 00:17:29,750 Similarly, for the fourth one, 235 00:17:29,750 --> 00:17:33,390 it says DishDetail slash 3, and so on. 236 00:17:33,390 --> 00:17:37,560 So, this Parameter value is the one that indicates to 237 00:17:37,560 --> 00:17:41,210 the DishDetail component which particular dish 238 00:17:41,210 --> 00:17:44,235 should be shown by the DishDetail component. 239 00:17:44,235 --> 00:17:49,250 That is what is being used by the DishDetail component to retrieve the information about 240 00:17:49,250 --> 00:17:55,045 that specific dish from the DishService using the GetDish method, 241 00:17:55,045 --> 00:18:01,715 and then that information is being displayed in the view of the DishDetail component. 242 00:18:01,715 --> 00:18:03,675 So, now in this exercise, 243 00:18:03,675 --> 00:18:09,575 we have learned how we can use RouteParameters to pass information to a component, 244 00:18:09,575 --> 00:18:14,804 and then the component get access to the Parameter and then uses that RouteParameter 245 00:18:14,804 --> 00:18:18,320 to decide the way it renders 246 00:18:18,320 --> 00:18:22,850 the view or fetch the information and render the view accordingly. 247 00:18:22,850 --> 00:18:26,385 With this, we complete this exercise. 248 00:18:26,385 --> 00:18:31,490 We have now almost completed constructing our single page application 249 00:18:31,490 --> 00:18:37,145 for the restaurant application that we have been working on so far. 250 00:18:37,145 --> 00:18:40,815 This is a good time for you to do a git commit with the message, 251 00:18:40,815 --> 00:18:44,060 Single-Page Application part 2.