1 00:00:00,000 --> 00:00:08,745 Now that we have an understanding of single-page applications, 2 00:00:08,745 --> 00:00:10,660 we'll continue working on 3 00:00:10,660 --> 00:00:14,490 our angular application that we have been working in the exercises so 4 00:00:14,490 --> 00:00:16,980 far and develop it into 5 00:00:16,980 --> 00:00:21,535 the single-page application using the support of the angular router module. 6 00:00:21,535 --> 00:00:25,110 We have already included multiple components as part of 7 00:00:25,110 --> 00:00:28,770 our angular application in the previous exercise and we have already 8 00:00:28,770 --> 00:00:32,625 configured for our angular application to be able to route 9 00:00:32,625 --> 00:00:37,410 between two different components. 10 00:00:37,410 --> 00:00:40,970 Now, we will integrate more into our angular application and 11 00:00:40,970 --> 00:00:44,960 develop it into the full-fledged angular application together with 12 00:00:44,960 --> 00:00:49,040 the navigation among the various views 13 00:00:49,040 --> 00:00:53,790 rendered by the various components of our application. 14 00:00:53,800 --> 00:00:58,275 Continuing with our application as it stands now, 15 00:00:58,275 --> 00:01:05,990 we have the home being rendered when you navigate to our application 16 00:01:05,990 --> 00:01:09,740 right now and then the Home template has 17 00:01:09,740 --> 00:01:13,740 been shown between the header and the footer and then when you go to the Menu, 18 00:01:13,740 --> 00:01:19,920 the menu is being shown between the header and the footer in the view here. 19 00:01:19,920 --> 00:01:25,490 Now, obviously, we need to integrate the other components that we 20 00:01:25,490 --> 00:01:28,700 included into our angular application 21 00:01:28,700 --> 00:01:32,715 to develop this as a full-fledged angular application. 22 00:01:32,715 --> 00:01:36,135 In this exercise, we're going to integrate the ContactComponent, 23 00:01:36,135 --> 00:01:38,914 we will update the template for the ContactComponent, 24 00:01:38,914 --> 00:01:43,190 we will also update the template for the HomeComponent and take this 25 00:01:43,190 --> 00:01:48,600 a step forward towards our single-page angular application. 26 00:01:48,600 --> 00:01:52,585 Let's start out with the ContactComponent. 27 00:01:52,585 --> 00:01:56,630 To get started, first copy the template for 28 00:01:56,630 --> 00:02:01,070 the ContactComponent that I have given you in the exercise instructions and then 29 00:02:01,070 --> 00:02:06,660 paste it into the contactcomponent.html file so that we will flush 30 00:02:06,660 --> 00:02:13,580 out the actual view of our ContactComponent in a bit more detail here. 31 00:02:13,580 --> 00:02:18,680 Now, you can see that I have cut and pasted the code for 32 00:02:18,680 --> 00:02:24,550 the template file from the instructions into my ContactComponent. 33 00:02:24,550 --> 00:02:27,650 We will complete the integration of 34 00:02:27,650 --> 00:02:30,665 the ContactComponent in our application and then we'll look at 35 00:02:30,665 --> 00:02:33,590 what the ContactComponent looks like and then come back 36 00:02:33,590 --> 00:02:36,940 and quickly look at this code a little bit later. 37 00:02:36,940 --> 00:02:41,660 Now, to integrate the ContactComponent into our angular application, 38 00:02:41,660 --> 00:02:46,910 we need to include a path to the ContactComponent into our routes. 39 00:02:46,910 --> 00:02:52,270 So, going to the routes.ts file right after the Menu, 40 00:02:52,270 --> 00:03:01,520 I'm going to include another path for the ContactComponent I will use 41 00:03:01,520 --> 00:03:05,480 the URL as contact us and 42 00:03:05,480 --> 00:03:15,375 the corresponding component is ContactComponent here. 43 00:03:15,375 --> 00:03:19,815 So, with this, we have now integrated our ContactComponent 44 00:03:19,815 --> 00:03:24,725 into our application and let's save the changes to 45 00:03:24,725 --> 00:03:30,935 this and then we will also need to update the header component and update 46 00:03:30,935 --> 00:03:37,540 the a link in the header component to help us to navigate to the ContactComponent. 47 00:03:37,540 --> 00:03:43,680 So, I'm just going to copy this from the menu a link in 48 00:03:43,680 --> 00:03:48,710 my header component's toolbar there and then copy that into 49 00:03:48,710 --> 00:03:53,960 the ContactComponent and then update it as contact us. 50 00:03:53,960 --> 00:03:57,680 Let's save the changes to all the files and 51 00:03:57,680 --> 00:04:02,469 then have a look at the resulting application. 52 00:04:02,469 --> 00:04:05,725 Going to the application in our browser, 53 00:04:05,725 --> 00:04:08,570 if we now navigate to the ContactComponent, 54 00:04:08,570 --> 00:04:12,680 we can see that the details of the ContactComponent are displayed 55 00:04:12,680 --> 00:04:16,790 here between the header and the footer as we expect. 56 00:04:16,790 --> 00:04:18,590 So, inside the ContactComponent, 57 00:04:18,590 --> 00:04:22,370 we have the Contact Us title 58 00:04:22,370 --> 00:04:26,390 there and then some location information where I have displayed the address. 59 00:04:26,390 --> 00:04:28,490 So, this is similar to the address that we 60 00:04:28,490 --> 00:04:30,740 have in the footer so I'm not going to explain that in 61 00:04:30,740 --> 00:04:36,050 detail then we have another part here where we include the Map of our Location. 62 00:04:36,050 --> 00:04:37,490 We are not going to do that at the moment, 63 00:04:37,490 --> 00:04:41,990 we're going to just leave it as blank and then also you see that I have 64 00:04:41,990 --> 00:04:48,150 three buttons that I have included here for Call, Skype, and Email. 65 00:04:48,150 --> 00:04:52,354 These three buttons are activated in our application 66 00:04:52,354 --> 00:04:57,910 and I'm using the mat raised button to render these three buttons. 67 00:04:57,910 --> 00:05:00,980 So, you can see that these buttons look different from 68 00:05:00,980 --> 00:05:05,080 the other buttons that you've included in your application there. 69 00:05:05,080 --> 00:05:10,870 So, this is a raised button component from our angular material there. 70 00:05:10,870 --> 00:05:14,195 So, having seen the ContactComponent and 71 00:05:14,195 --> 00:05:17,675 the fact that we are able to navigate to the ContactComponent. 72 00:05:17,675 --> 00:05:20,560 Now, from the other components, 73 00:05:20,560 --> 00:05:22,730 let's take a quick look at 74 00:05:22,730 --> 00:05:29,250 the HTML code that we included for the template for our ContactComponent. 75 00:05:29,250 --> 00:05:33,335 Going to contactcomponent.html, you'll see that we have 76 00:05:33,335 --> 00:05:38,720 the title for this page included by using this div 77 00:05:38,720 --> 00:05:42,965 here and the second div inside here with fxFlex 78 00:05:42,965 --> 00:05:48,020 includes the location information and then this inside this location information, 79 00:05:48,020 --> 00:05:51,260 I'm again defining another div which will allow me to 80 00:05:51,260 --> 00:05:55,480 include multiple views into this other div here. 81 00:05:55,480 --> 00:05:57,290 So, inside this, I'm defining 82 00:05:57,290 --> 00:06:00,410 another div with effects layout column and effects layer row. 83 00:06:00,410 --> 00:06:09,675 So, this is nested way of defining my CSS Flex views here. 84 00:06:09,675 --> 00:06:11,270 So, inside this again, 85 00:06:11,270 --> 00:06:14,990 I'm using a div Flex view with fxFlex 50 so it 86 00:06:14,990 --> 00:06:18,900 occupies one half and then fxFlex offset 20 pixels. 87 00:06:18,900 --> 00:06:26,300 So, this CSS view will be displaced to the right by 20 pixels so I 88 00:06:26,300 --> 00:06:29,300 have some margin there and then we have 89 00:06:29,300 --> 00:06:33,800 the address included here and then down below here, 90 00:06:33,800 --> 00:06:36,080 you can see that inside another div, 91 00:06:36,080 --> 00:06:42,690 I have an a tag with mat raised button associated with it. 92 00:06:42,690 --> 00:06:45,740 This is what causes the raised buttons that we 93 00:06:45,740 --> 00:06:49,140 have at the bottom of the Contact page there. 94 00:06:49,140 --> 00:06:51,050 So, three of them here. 95 00:06:51,050 --> 00:06:52,730 One for the telephone number. 96 00:06:52,730 --> 00:07:00,425 One for the Skype and one for the email here and also note that I am making use of 97 00:07:00,425 --> 00:07:04,010 the Font Awesome icons for each of them and then the 98 00:07:04,010 --> 00:07:08,350 map of your location in another div here. 99 00:07:08,350 --> 00:07:13,690 So, both these enclose inside this outer div which is enclosed again inside the div. 100 00:07:13,690 --> 00:07:20,555 So, nested way of defining the flex layouts for our different parts here. 101 00:07:20,555 --> 00:07:23,465 So, that's about it for the ContactComponent. 102 00:07:23,465 --> 00:07:29,329 We have now integrated that into our single-page application. 103 00:07:29,329 --> 00:07:32,445 Now, going to the DishService. 104 00:07:32,445 --> 00:07:36,440 Now, in the DishService along with the getDishes method, 105 00:07:36,440 --> 00:07:39,005 I'm going to introduce two more methods. 106 00:07:39,005 --> 00:07:42,350 One method called getDish, 107 00:07:42,350 --> 00:07:50,950 a specific dish and then I will identify the dish with an id specified here. 108 00:07:50,950 --> 00:07:52,460 So, the id would 109 00:07:52,460 --> 00:08:01,885 be and that would specify give me the dish with the id corresponding to this number. 110 00:08:01,885 --> 00:08:04,640 So that will be one more method that I'm going to add 111 00:08:04,640 --> 00:08:09,870 in and also add in another method called getFeaturedDish. 112 00:08:13,750 --> 00:08:17,495 So, this featured dish will use 113 00:08:17,495 --> 00:08:22,460 the featured property that we added 114 00:08:22,460 --> 00:08:27,995 and then return the dish for which the feature is set to true. 115 00:08:27,995 --> 00:08:33,330 So, that's the way you can select out one specific dish and then make it available. 116 00:08:33,330 --> 00:08:37,970 Now, the reason why I have that featured flag is that when the feature is set to true, 117 00:08:37,970 --> 00:08:41,680 that particular dish will be rendered on the HomeComponent. 118 00:08:41,680 --> 00:08:44,455 Now, how do we select these dishes? 119 00:08:44,455 --> 00:08:47,185 So, let's add in the code for this. 120 00:08:47,185 --> 00:08:49,050 So, for the getDish, 121 00:08:49,050 --> 00:08:57,650 I need to return something from the dishes constant that I already have there. 122 00:08:57,650 --> 00:08:59,600 So, from the dishes constant, 123 00:08:59,600 --> 00:09:05,525 I'm going to use the JavaScript's way of doing filtering of an array. 124 00:09:05,525 --> 00:09:09,470 So, the filtering of an array will help me to select 125 00:09:09,470 --> 00:09:13,565 out only those elements from the array that 126 00:09:13,565 --> 00:09:16,985 match a particular criteria that will be specified 127 00:09:16,985 --> 00:09:21,530 inside the filter here and then among them I will return only the first one. 128 00:09:21,530 --> 00:09:25,050 Now, it so happens that when I specify an id, 129 00:09:25,050 --> 00:09:28,960 it will select only one item but then that'll become an array. 130 00:09:28,960 --> 00:09:33,150 So, from that array, I need to extract out that one element in that array. 131 00:09:33,150 --> 00:09:37,320 So, that's why I'm using within braces zero there. 132 00:09:37,320 --> 00:09:41,010 So, that will help me identify. 133 00:09:41,010 --> 00:09:43,005 So, how do I filter my dishes? 134 00:09:43,005 --> 00:09:47,140 So, for each dish in my list of dishes, 135 00:09:47,140 --> 00:09:49,729 so this is where I'm going to use 136 00:09:49,729 --> 00:09:55,610 another feature of typescript called as arrow functions. 137 00:09:55,610 --> 00:10:01,575 The arrow function is a shorthand way of writing a function. 138 00:10:01,575 --> 00:10:04,090 So, if you are used to writing functions, 139 00:10:04,090 --> 00:10:06,100 instead of writing the function elaborately saying 140 00:10:06,100 --> 00:10:09,850 function and then within brackets dish and so on, 141 00:10:09,850 --> 00:10:13,900 I can simply write it in cases where the function is very simple, 142 00:10:13,900 --> 00:10:17,195 it's very easy to write this as an arrow function here. 143 00:10:17,195 --> 00:10:27,305 So, in here, I will specify saying dish id is equal to the id. 144 00:10:27,305 --> 00:10:33,245 So, what I'm specifying here is filter the dishes array and extract out 145 00:10:33,245 --> 00:10:40,360 only those items from the array for which the dish id. 146 00:10:40,360 --> 00:10:44,570 So, each item here is being identified by this parameter dish here. 147 00:10:44,570 --> 00:10:47,090 So, for which the dish id matches the 148 00:10:47,090 --> 00:10:50,360 id that has been supplied as a parameter to the dish. 149 00:10:50,360 --> 00:10:53,810 So, this way you will extract out that specific dish from 150 00:10:53,810 --> 00:10:59,400 this array and then return that dish from this getDish method. 151 00:10:59,710 --> 00:11:04,240 The arrow functions helped me to write code in a more simpler way. 152 00:11:04,240 --> 00:11:06,724 If you don't like arrow functions 153 00:11:06,724 --> 00:11:09,710 then you can write it in the more conventional way by saying, 154 00:11:09,710 --> 00:11:16,870 "function dish", and then from this then you'll return dish.id triple equal to id, 155 00:11:16,870 --> 00:11:19,005 so this will return a Boolean. 156 00:11:19,005 --> 00:11:22,960 When the filter encounters a true inside here, 157 00:11:22,960 --> 00:11:27,115 those elements from the dishes will be selected out into the array. 158 00:11:27,115 --> 00:11:31,980 So, this is where your JavaScript knowledge comes to your advantage. 159 00:11:31,980 --> 00:11:34,060 So, you need to know how a JavaScript filter 160 00:11:34,060 --> 00:11:38,085 works to help you to understand how this is done. 161 00:11:38,085 --> 00:11:41,390 Okay, now similarly for the featured dish, 162 00:11:41,390 --> 00:11:47,365 I'm going to use a similar method for extracting from my dishes 163 00:11:47,365 --> 00:11:51,620 array using a filter here but the filter that 164 00:11:51,620 --> 00:11:57,000 I'm going to define here would be again an arrow function here. 165 00:11:58,410 --> 00:12:03,260 You'll get used to arrow functions and then once you get used to them, 166 00:12:03,260 --> 00:12:06,370 then you'll realize how simple they are too right. 167 00:12:06,370 --> 00:12:11,380 So, in here the way for selecting me 168 00:12:11,380 --> 00:12:20,445 is dish.featured property because this dish.feature is already a Boolean there. 169 00:12:20,445 --> 00:12:25,720 So, that will help me to return the featured dish. 170 00:12:25,720 --> 00:12:27,355 So, for whichever the dish, 171 00:12:27,355 --> 00:12:29,120 the dish feature is true. 172 00:12:29,120 --> 00:12:31,710 That particular dish will be filtered out from 173 00:12:31,710 --> 00:12:35,330 the dishes array and then there will be only one day. 174 00:12:35,330 --> 00:12:38,280 Anyway, you should make sure of that 175 00:12:38,280 --> 00:12:42,210 so that you'll set featured only to true for one of those, 176 00:12:42,210 --> 00:12:50,630 and then I use this because this filter will return a sub array from the dishes array, 177 00:12:50,630 --> 00:12:52,300 so I need to select out that element. 178 00:12:52,300 --> 00:12:55,600 There'll be one single element there at index zero. 179 00:12:55,600 --> 00:12:59,150 So, I am using the index zero to select that element and return 180 00:12:59,150 --> 00:13:03,680 that from the get featured dish method here. 181 00:13:03,680 --> 00:13:09,985 So, that completes the update to the dish service. 182 00:13:09,985 --> 00:13:15,140 To construct our home template, 183 00:13:15,140 --> 00:13:21,195 we're going to feature on the home view a selected dish, 184 00:13:21,195 --> 00:13:24,545 a selected current promotion by the restaurant, 185 00:13:24,545 --> 00:13:29,785 and a selected corporate leader from the list of readers. 186 00:13:29,785 --> 00:13:34,260 The corporate leader that is featured on the front page will 187 00:13:34,260 --> 00:13:38,550 be part of your assignment that follows this particular lesson. 188 00:13:38,550 --> 00:13:40,380 But we are going to now include, 189 00:13:40,380 --> 00:13:45,775 we have a featured dish and the featured promotion on the front page. 190 00:13:45,775 --> 00:13:50,170 So, which means that I need a promotion service which returns 191 00:13:50,170 --> 00:13:55,250 the set of promotions that are being conducted by this particular restaurant. 192 00:13:55,250 --> 00:14:01,095 So, let me add in a promotions service for my application. 193 00:14:01,095 --> 00:14:04,005 So, to do that, in the shared folder, 194 00:14:04,005 --> 00:14:12,140 I'm going to create a new file called promotion.ts. 195 00:14:12,560 --> 00:14:18,410 In the promotion.ts, I will create a class, 196 00:14:18,870 --> 00:14:29,125 class promotion and return this promotion here. 197 00:14:29,125 --> 00:14:32,460 So, what does this promotion class contain? 198 00:14:32,460 --> 00:14:36,529 It contains an id property, 199 00:14:36,529 --> 00:14:43,010 then it contains the name for the promotion of the restaurant. 200 00:14:43,010 --> 00:14:47,310 So for example, the promotion could be like weekend buffet. 201 00:14:47,310 --> 00:14:52,320 Or 10% of every single day at 202 00:14:52,320 --> 00:14:57,845 lunchtime and things like that can be featured on your restaurants front page there. 203 00:14:57,845 --> 00:15:01,280 So, name then I will also include an image, 204 00:15:01,280 --> 00:15:05,635 which is to be of the type string the image URL, 205 00:15:05,635 --> 00:15:10,625 then label which will be a string. 206 00:15:10,625 --> 00:15:13,895 Price also a string. 207 00:15:13,895 --> 00:15:15,330 Now, the labor implies, 208 00:15:15,330 --> 00:15:17,260 you don't see me using them at the moment, 209 00:15:17,260 --> 00:15:25,780 we will bring them into usage in one of the later exercises featured Boolean. 210 00:15:25,780 --> 00:15:29,965 So, you see the featured flag again appearing in the promotion also, 211 00:15:29,965 --> 00:15:34,960 and then description string. 212 00:15:34,960 --> 00:15:38,380 So, you see that the promotion structured is pretty much 213 00:15:38,380 --> 00:15:42,840 similar to the dish structure that we have seen earlier. 214 00:15:42,840 --> 00:15:46,010 So, this is the promotion class here. 215 00:15:46,010 --> 00:15:48,090 Now, along with the promotion class, 216 00:15:48,090 --> 00:15:50,980 I need to create another class that 217 00:15:50,980 --> 00:16:00,615 exports the set of promotion say constant with promotions here. 218 00:16:00,615 --> 00:16:04,240 So here, I'm going to import 219 00:16:06,920 --> 00:16:11,024 the promotion class 220 00:16:11,024 --> 00:16:18,400 from the promotion.ts file, 221 00:16:18,400 --> 00:16:25,290 and then I would export a constant called promotion. 222 00:16:25,290 --> 00:16:32,395 So, you see that I am using a structure very similar to the dishes here. 223 00:16:32,395 --> 00:16:36,290 So, you begin to see that, 224 00:16:36,660 --> 00:16:40,790 that structure that we used earlier for 225 00:16:40,790 --> 00:16:46,465 the promotions for the dishes is also useful for declaring promotions. 226 00:16:46,465 --> 00:16:47,910 If you have a different structure, 227 00:16:47,910 --> 00:16:50,990 you will see that with leaders the structure will be a little bit 228 00:16:50,990 --> 00:16:55,315 different for the JavaScript object here. The promotions. 229 00:16:55,315 --> 00:17:00,160 Now, the details of a specific promotion I have given it in the instructions, 230 00:17:00,160 --> 00:17:02,790 so I would suggest that you copy and paste it from 231 00:17:02,790 --> 00:17:05,550 there instead of me typing the whole thing in here. 232 00:17:05,550 --> 00:17:07,390 So, let me go ahead and copy and paste 233 00:17:07,390 --> 00:17:11,800 that JavaScript object into this JavaScript object array here, 234 00:17:11,800 --> 00:17:13,510 so there you go. 235 00:17:13,510 --> 00:17:20,475 The promotion has just one single object at the moment. 236 00:17:20,475 --> 00:17:22,715 In the future, we can add more. 237 00:17:22,715 --> 00:17:26,375 At this point, I have only one so I just added it in there, 238 00:17:26,375 --> 00:17:31,265 and I'm going to use that and that is the featured promotion for my restaurant there. 239 00:17:31,265 --> 00:17:33,045 This is just promotion, 240 00:17:33,045 --> 00:17:35,820 so let me update that promotions, 241 00:17:35,820 --> 00:17:37,465 that's what I need. 242 00:17:37,465 --> 00:17:42,120 So, I'm just going to save the changes to the promotion.ts file. 243 00:17:42,120 --> 00:17:46,820 Next, I will create another service called promotion service. 244 00:17:46,820 --> 00:17:53,285 So to do that, let's go to the command line at the command prompt type 245 00:17:53,285 --> 00:18:02,005 ng generate surveys services/promotion. 246 00:18:02,005 --> 00:18:05,105 So, the promotion service being created there. 247 00:18:05,105 --> 00:18:08,500 So, now the PromotionService is up in place. 248 00:18:08,500 --> 00:18:13,575 So, let's add in the features for the PromotionService. 249 00:18:13,575 --> 00:18:18,070 So, going to the PromotionService, 250 00:18:18,070 --> 00:18:25,690 you see that the PromotionService is now included in your services folder here, 251 00:18:25,690 --> 00:18:28,615 so we need to prepare a PromotionService. 252 00:18:28,615 --> 00:18:30,715 So, in the PromotionService, 253 00:18:30,715 --> 00:18:33,170 I'm going to import 254 00:18:37,170 --> 00:18:48,355 promotion from shared/promotion, 255 00:18:48,355 --> 00:18:55,010 the promotion class, and also import 256 00:18:57,000 --> 00:19:09,985 promotions from shared/promotions class there. 257 00:19:09,985 --> 00:19:11,885 The constant promotions from there. 258 00:19:11,885 --> 00:19:14,590 Now, just like we had for the dish service, 259 00:19:14,590 --> 00:19:19,840 we need to create three methods inside the PromotionsService. 260 00:19:19,840 --> 00:19:25,080 So, what I am going to do is to save myself the trouble, 261 00:19:25,080 --> 00:19:27,450 I will go into the dish.service, 262 00:19:27,450 --> 00:19:29,750 and then just copy these three, 263 00:19:29,750 --> 00:19:33,445 and then paste it into my promotion service, 264 00:19:33,445 --> 00:19:35,570 then just edit the code. 265 00:19:35,570 --> 00:19:38,965 Okay, so from the promotion service, 266 00:19:38,965 --> 00:19:46,505 I need to return getPromotions and 267 00:19:46,505 --> 00:19:54,340 this is of the type promotion and then this will return PROMOTIONS, 268 00:19:54,340 --> 00:20:00,670 and then get the second one would be promotion 269 00:20:00,670 --> 00:20:08,505 which again receives the id of the promotion, 270 00:20:08,505 --> 00:20:10,615 so I'm going to return 271 00:20:10,615 --> 00:20:20,830 PROMOTIONS.filter promo.id is id. 272 00:20:20,830 --> 00:20:26,780 Then getFeatured promotion. 273 00:20:26,780 --> 00:20:31,860 So, you can see that the structure of the Promotionservice is very much similar to 274 00:20:31,860 --> 00:20:39,920 the dishservice and this wouldn't be promotion type, 275 00:20:39,920 --> 00:20:41,875 and this will return 276 00:20:41,875 --> 00:20:52,145 PROMOTIONS.filter promo and this will be promo.featured and that's it. 277 00:20:52,145 --> 00:20:55,030 My PromotionService is all ready. 278 00:20:55,030 --> 00:20:59,695 Now, I am going to go into the home component, and prepare that, 279 00:20:59,695 --> 00:21:02,115 so that in my home component, 280 00:21:02,115 --> 00:21:07,560 I will display a featured dish and a featured promotion. 281 00:21:07,560 --> 00:21:10,820 The featured/dish and featured/promotion will be displayed in 282 00:21:10,820 --> 00:21:15,690 the home component using the angular material card component. 283 00:21:15,690 --> 00:21:19,675 So, we need to first get the data into our home component, 284 00:21:19,675 --> 00:21:24,690 so that's what we will do in the home components type script file there. 285 00:21:24,690 --> 00:21:29,630 So, going to the home components type script file, home component.ts. 286 00:21:29,630 --> 00:21:44,330 In here, I need to import the dish 287 00:21:44,330 --> 00:21:52,060 from shared/dish and also the 288 00:21:52,060 --> 00:22:07,430 corresponding dish.service from services/dish.service. 289 00:22:12,330 --> 00:22:17,495 Okay, now I'm going to also do that same thing for promotions, 290 00:22:17,495 --> 00:22:21,465 so I'm just going to copy that and paste it in here, 291 00:22:21,465 --> 00:22:23,120 and then edit this one, 292 00:22:23,120 --> 00:22:26,735 so this would be promotion, 293 00:22:26,735 --> 00:22:31,315 this would be PromotionService, 294 00:22:31,315 --> 00:22:42,350 and then promotion, and then this would be PromotionService. 295 00:22:42,790 --> 00:22:46,800 So, with this, we have both the dish and 296 00:22:46,800 --> 00:22:50,205 dish services and promotion service available for us, 297 00:22:50,205 --> 00:22:52,485 within our home component. 298 00:22:52,485 --> 00:22:54,660 Coming now to the constructor. 299 00:22:54,660 --> 00:23:01,180 Lets now inject the two services here, 300 00:23:02,280 --> 00:23:12,590 and make them available for our applications or dish service, 301 00:23:25,490 --> 00:23:30,240 and the promotion service injected here. 302 00:23:30,240 --> 00:23:34,610 So, with this, we have access to both the services. 303 00:23:34,610 --> 00:23:38,650 So now within the ngOnInit method, 304 00:23:38,650 --> 00:23:43,779 I'm going to fetch the two featured dishes. 305 00:23:43,779 --> 00:23:51,770 So, I would say this.dishService.getFeaturedDish 306 00:23:51,770 --> 00:23:59,520 and also promotion, 307 00:24:03,690 --> 00:24:11,510 promotionService and getFeaturedPromotion. 308 00:24:14,400 --> 00:24:18,820 Just to be complete, 309 00:24:18,820 --> 00:24:23,185 let me declare the dish here as of 310 00:24:23,185 --> 00:24:32,025 type Dish and the promotion as of type Promotion here. 311 00:24:32,025 --> 00:24:38,830 So, that should clarify all the values that we are using inside here. 312 00:24:38,830 --> 00:24:46,665 So, with this, we complete the update to our home components typescript file. 313 00:24:46,665 --> 00:24:49,710 Let's now switch to the template file, 314 00:24:49,710 --> 00:24:55,815 and then add in the two cards to display the featured dish and the featured promotion. 315 00:24:55,815 --> 00:25:00,310 Now, for this, I have given you the code in the instructions. 316 00:25:00,310 --> 00:25:02,995 So, I'm just going to copy that code and paste it in here. 317 00:25:02,995 --> 00:25:05,640 You already know how to create cards, 318 00:25:05,640 --> 00:25:10,590 so you would be able to easily follow the code that I paste here. 319 00:25:10,590 --> 00:25:17,095 So, the home components template is also updated, 320 00:25:17,095 --> 00:25:20,830 so you can see that it has two cards here. 321 00:25:20,830 --> 00:25:26,550 For one, displaying the dish and the other one displaying the promotion here, 322 00:25:26,550 --> 00:25:33,030 and enclosed inside a fxLayout div here. 323 00:25:33,030 --> 00:25:38,175 So, let's save the changes and then take a quick look at our application. 324 00:25:38,175 --> 00:25:41,095 After creating the promotion service, 325 00:25:41,095 --> 00:25:45,470 we also need to include the promotion service in the AppModule, 326 00:25:45,470 --> 00:25:47,750 and make it available for our application. 327 00:25:47,750 --> 00:25:49,840 So, I'm going to go in here, 328 00:25:49,840 --> 00:25:53,350 and then import 329 00:25:53,350 --> 00:26:00,950 the promotion service in here. 330 00:26:03,150 --> 00:26:07,915 Then, declared the promotion service 331 00:26:07,915 --> 00:26:16,030 as one of the providers 332 00:26:16,030 --> 00:26:19,720 in my AppModule.ts file here. 333 00:26:19,720 --> 00:26:21,580 So, in the AppModule file, 334 00:26:21,580 --> 00:26:23,415 I'm requiring both these, 335 00:26:23,415 --> 00:26:25,480 and then saving changes. 336 00:26:25,480 --> 00:26:27,055 Going to the browser, 337 00:26:27,055 --> 00:26:29,455 you can now see that in the browser, 338 00:26:29,455 --> 00:26:34,150 the home component now shows the two cards, 339 00:26:34,150 --> 00:26:40,580 one for the featured dish and one for the featured promotion here. 340 00:26:40,580 --> 00:26:43,850 So, you can see that the two cars are displayed here. 341 00:26:43,850 --> 00:26:50,505 I can now navigate to the Menu page, 342 00:26:50,505 --> 00:26:54,405 and then also to the Contact page. 343 00:26:54,405 --> 00:26:56,690 The About page is still not there, 344 00:26:56,690 --> 00:27:02,070 you're going to fill in the About page as part of your second assignment. 345 00:27:02,070 --> 00:27:07,490 Taking a look at the same application on a smaller screen size, 346 00:27:07,490 --> 00:27:11,200 so this is an iPhone 6 Plus screen. 347 00:27:11,200 --> 00:27:16,225 Let's look at the home component and an iPhone 6 Plus screen. 348 00:27:16,225 --> 00:27:24,490 You can see that featured dish and featured promotion on the homepage there. 349 00:27:24,490 --> 00:27:29,820 Then, the menu that we have seen earlier, 350 00:27:29,820 --> 00:27:35,150 and also the Contact page being displayed here. 351 00:27:35,150 --> 00:27:41,395 So, you can see that now our single-page application is a lot more configured. 352 00:27:41,395 --> 00:27:43,120 Except for the About, 353 00:27:43,120 --> 00:27:46,875 which we will do in the second assignment. 354 00:27:46,875 --> 00:27:54,345 One more minor change that you can do in your header components HTML file, 355 00:27:54,345 --> 00:27:57,470 is that along with the router link directive, 356 00:27:57,470 --> 00:28:06,880 the Angular Route are also supports one more a directive called routeLinkActive. 357 00:28:06,880 --> 00:28:14,660 This allows us to apply some classes to the particular element here. 358 00:28:14,660 --> 00:28:16,305 So, in this case, 359 00:28:16,305 --> 00:28:20,090 if this link becomes active than whatever I specify here, 360 00:28:20,090 --> 00:28:24,980 will be applied as a class to this particular item there. 361 00:28:24,980 --> 00:28:28,309 So, I'm going to specify a class called active. 362 00:28:28,309 --> 00:28:32,280 So here, I'm specifying routerLinkActive with active. 363 00:28:32,280 --> 00:28:35,265 So, if I define a CSS class called active, 364 00:28:35,265 --> 00:28:39,300 then the class will be applied to this link, 365 00:28:39,300 --> 00:28:46,975 whenever this particular view is being shown on the applications page here. 366 00:28:46,975 --> 00:28:53,250 I'm going to copy the same thing and apply it to all the remaining buttons, 367 00:28:53,250 --> 00:28:56,735 where I have defined the router link already. 368 00:28:56,735 --> 00:28:59,600 So, I'm going to apply the routerLinkActive class, 369 00:28:59,600 --> 00:29:04,195 to the Home, the Menu and the Contact Us. 370 00:29:04,195 --> 00:29:08,535 Now, this also means that I should define an active CSS class. 371 00:29:08,535 --> 00:29:14,360 So, to do that, I'm going to go into the header components SESS file, 372 00:29:14,360 --> 00:29:16,590 and then define an active class here, 373 00:29:16,590 --> 00:29:21,400 so I will define the active class right there. 374 00:29:21,400 --> 00:29:22,870 To define the active class, 375 00:29:22,870 --> 00:29:31,220 I'm going to add in one more color variable here called background-moredark. 376 00:29:33,030 --> 00:29:39,080 Then, the corresponding colour is 4527A0, 377 00:29:39,900 --> 00:29:47,480 this is a darker version of this background dark color, 4527A0. 378 00:29:47,480 --> 00:29:50,055 Then, for my active, 379 00:29:50,055 --> 00:29:52,720 what I'm going to do is, from active class, 380 00:29:52,720 --> 00:29:57,725 I will let the class define a background, 381 00:29:57,725 --> 00:29:59,560 set the background of 382 00:29:59,560 --> 00:30:09,410 that element to the background-moredark color. 383 00:30:10,170 --> 00:30:18,270 So, when that particular view is selected and shown in the page, 384 00:30:18,270 --> 00:30:21,630 then this active class will be applied to 385 00:30:21,630 --> 00:30:24,670 that particular A tag 386 00:30:24,670 --> 00:30:30,340 there by the router link active directive that we have applied here. 387 00:30:30,340 --> 00:30:34,750 Now, what change does this cause on our webpage. 388 00:30:34,750 --> 00:30:36,460 Now, going to our webpage, 389 00:30:36,460 --> 00:30:40,685 we will see what this introduces on our webpage. 390 00:30:40,685 --> 00:30:43,390 Going to our application, 391 00:30:43,390 --> 00:30:45,360 you now see that when we are in 392 00:30:45,360 --> 00:30:52,125 the home view in the home component being displayed here, its corresponding view. 393 00:30:52,125 --> 00:30:59,870 Then, the Home button here has a different background color that is 394 00:30:59,870 --> 00:31:03,670 applied because the active class has been added in because we 395 00:31:03,670 --> 00:31:08,150 define the routerLinkActive to active here. 396 00:31:08,150 --> 00:31:09,510 So, that class is applied. 397 00:31:09,510 --> 00:31:11,985 Similarly, when you select the menu, 398 00:31:11,985 --> 00:31:17,205 then you see that the menu is highlighted in the header, 399 00:31:17,205 --> 00:31:20,025 and the menus view is shown here, 400 00:31:20,025 --> 00:31:21,795 and similarly for the content. 401 00:31:21,795 --> 00:31:29,035 Now, this enables us to see at a glance on which pay particular view VR, 402 00:31:29,035 --> 00:31:31,760 in our single page application. 403 00:31:31,760 --> 00:31:38,145 So, this is an additional little bit offer enhancement to the UI, 404 00:31:38,145 --> 00:31:42,255 that enables us to see some interesting features. 405 00:31:42,255 --> 00:31:46,004 Although, it doesn't add much to the functionality of the application, 406 00:31:46,004 --> 00:31:54,370 but just add some little feature that will be a useful addition to your application. 407 00:31:54,370 --> 00:31:58,615 So, with this, we complete this exercise. 408 00:31:58,615 --> 00:32:02,275 In this exercise, we have worked to integrate 409 00:32:02,275 --> 00:32:07,495 the contact component into our single page application. 410 00:32:07,495 --> 00:32:15,800 We also designed a couple of cards that we included into the home component, 411 00:32:15,800 --> 00:32:20,180 and added in a few new features to our application. 412 00:32:20,180 --> 00:32:28,310 This is a good time for you to save the changes to your Git repository with the message, 413 00:32:28,310 --> 00:32:31,520 Single Page Application Part 1.