1 00:00:03,920 --> 00:00:10,619 Before we move forward with the rest of the exercises and the assignments in this course, 2 00:00:10,619 --> 00:00:13,245 I thought this would be a good time for me to 3 00:00:13,245 --> 00:00:16,450 give my angular application a nice structure. 4 00:00:16,450 --> 00:00:19,660 So, this is where I'm going to add in the header and footer 5 00:00:19,660 --> 00:00:22,875 for my angular application so that the way 6 00:00:22,875 --> 00:00:29,635 the UI is rendered is lot more attractive than what it has been so far. 7 00:00:29,635 --> 00:00:34,010 So, let's see how we can build up multiple components to 8 00:00:34,010 --> 00:00:38,150 occupy different parts of the screen within our angular application. 9 00:00:38,150 --> 00:00:43,445 So, here, you will see that my angular application now is going to consist of a header, 10 00:00:43,445 --> 00:00:46,830 which is a separate component, the footer, 11 00:00:46,830 --> 00:00:48,400 which is another component, 12 00:00:48,400 --> 00:00:50,145 and then in-between the two, 13 00:00:50,145 --> 00:00:54,860 I will have the part of my angular application that is going to 14 00:00:54,860 --> 00:01:00,080 be controlled later on by using the angular router. 15 00:01:00,080 --> 00:01:06,740 So, you see, I'm setting up the stage for what is going to come later on in this course. 16 00:01:06,740 --> 00:01:08,840 So, along the way, 17 00:01:08,840 --> 00:01:14,195 we'll also make use of Font Awesome Icons within our angular application. 18 00:01:14,195 --> 00:01:16,540 I'm just fond of the Font Awesome Icons, 19 00:01:16,540 --> 00:01:18,890 so I thought this would be a good place to 20 00:01:18,890 --> 00:01:23,005 introduce these icons into my angular application. 21 00:01:23,005 --> 00:01:28,715 To proceed forward, let's install font awesome into our angular application. 22 00:01:28,715 --> 00:01:31,920 So, to do that, I'll use NPM to go, 23 00:01:31,920 --> 00:01:34,320 and fetch font-awesome for me, 24 00:01:34,320 --> 00:01:41,475 so NPM install font-awesome 4.7.0, and save. 25 00:01:41,475 --> 00:01:44,055 Then, let font-awesome be installed. 26 00:01:44,055 --> 00:01:48,435 So, once font-awesome gets into our angular application, 27 00:01:48,435 --> 00:01:50,570 and then becomes part of the node modules 28 00:01:50,570 --> 00:01:53,055 that are included within our angular application, 29 00:01:53,055 --> 00:01:58,465 the next step is to make it available for our angular application. 30 00:01:58,465 --> 00:02:03,355 We need to integrate font-awesome into our angular application. 31 00:02:03,355 --> 00:02:04,710 So, to do that, 32 00:02:04,710 --> 00:02:06,510 go to the source folder, 33 00:02:06,510 --> 00:02:14,280 and then create a file named _variables.SCSS in the source folder. 34 00:02:14,280 --> 00:02:18,400 In the variables.SCSS file, 35 00:02:18,400 --> 00:02:27,860 add in $fa-font-path: and 36 00:02:27,860 --> 00:02:33,810 then within quotes, put../node_modules/font-awesome/fonts. 37 00:02:38,510 --> 00:02:45,080 So, we're specifying the font path for our font awesome files here. 38 00:02:45,330 --> 00:02:51,245 Then, open the styles.SCSS file, 39 00:02:51,245 --> 00:02:53,995 and then in the styles.SCSS file, 40 00:02:53,995 --> 00:02:56,720 we're going to add in a couple of lines there. 41 00:02:56,720 --> 00:03:05,335 First, we will import the variables that we have just declared by saying @import, 42 00:03:05,335 --> 00:03:08,550 and within quotes variables, 43 00:03:08,550 --> 00:03:14,025 then we will import the font-awesome files there, 44 00:03:14,025 --> 00:03:15,790 then we'll say 45 00:03:16,040 --> 00:03:30,020 @import../node_modules/font-awesome/SCSS/font-awesome. We are importing the 46 00:03:30,020 --> 00:03:36,540 SCSS version of it because we are using SCSS in our angular application. 47 00:03:36,670 --> 00:03:41,850 Once we have modified the styles for the CSS file, 48 00:03:41,850 --> 00:03:43,680 let's save the changes. 49 00:03:43,680 --> 00:03:46,580 At this point, we may need to restart 50 00:03:46,580 --> 00:03:50,840 our server that was serving up our angular application. 51 00:03:50,840 --> 00:03:53,590 So, where you typed the NG serve, 52 00:03:53,590 --> 00:03:58,010 you may wish to stop the server that is serving up your angular application and 53 00:03:58,010 --> 00:04:03,135 restart it so that it will include this new changes that were made. 54 00:04:03,135 --> 00:04:05,280 So, going to my terminal, 55 00:04:05,280 --> 00:04:09,110 I'm going to stop my server, 56 00:04:09,110 --> 00:04:15,095 and then restart the server so that it'll take into account the change that I have made. 57 00:04:15,095 --> 00:04:18,530 You would see the current state of 58 00:04:18,530 --> 00:04:21,770 our angular application by looking at it in the browser. 59 00:04:21,770 --> 00:04:25,040 So, this is what we have in our angular application. 60 00:04:25,040 --> 00:04:28,160 I want to be able to add a header and footer to 61 00:04:28,160 --> 00:04:33,320 this view so that I can use both the header and footer, 62 00:04:33,320 --> 00:04:36,680 and then the actual content between the header 63 00:04:36,680 --> 00:04:40,550 and the footer in the way I construct my angular application. 64 00:04:40,550 --> 00:04:41,690 So, to do that, 65 00:04:41,690 --> 00:04:46,135 I'm going to create two new components called header and footer, 66 00:04:46,135 --> 00:04:51,510 and let them manage their part of the screen that is allocated for them. 67 00:04:51,510 --> 00:04:56,290 Going to the prompt, let me generate a new header component. 68 00:04:56,290 --> 00:04:58,950 I can even say ng g, 69 00:04:58,950 --> 00:05:02,420 that is sufficient enough for angular CLI to 70 00:05:02,420 --> 00:05:06,190 recognize that it wants to generate a component. 71 00:05:06,190 --> 00:05:11,310 So, I say ng g component header, 72 00:05:11,760 --> 00:05:17,370 and also ng g component footer. 73 00:05:17,370 --> 00:05:20,900 So, now, I have two components that are available for me 74 00:05:20,900 --> 00:05:25,030 to make use of within my angular application. 75 00:05:25,030 --> 00:05:28,445 How am I going to make use of these two components? 76 00:05:28,445 --> 00:05:31,665 Let's go to the App component.html file, 77 00:05:31,665 --> 00:05:35,360 and then make use of these two components in the way we 78 00:05:35,360 --> 00:05:40,340 compose the entire screen for our angular application. 79 00:05:40,340 --> 00:05:43,185 Going back to our application, 80 00:05:43,185 --> 00:05:48,620 we see that the app module.ts file 81 00:05:48,620 --> 00:05:51,680 already includes the header and the footer component 82 00:05:51,680 --> 00:05:54,965 and they have already been included in the declarations here. 83 00:05:54,965 --> 00:05:58,075 So this is the advantage of using the angular CLI, 84 00:05:58,075 --> 00:06:01,610 it takes care of all this groundwork for 85 00:06:01,610 --> 00:06:05,825 you so that you can concentrate on just building your angular application. 86 00:06:05,825 --> 00:06:09,340 So, that's the reason why I love the angular CLI 87 00:06:09,340 --> 00:06:13,490 as an approach for building my angular application. 88 00:06:13,490 --> 00:06:20,640 So now, let's go to the app components HTML file. 89 00:06:20,640 --> 00:06:24,530 So, here, you see that we have included the app menu down there. 90 00:06:24,530 --> 00:06:29,430 I'm going to remove this tool bar from my app components HTML file. 91 00:06:29,430 --> 00:06:37,650 That toolbar will become part of the header template for my header component. 92 00:06:37,650 --> 00:06:45,500 So, instead my app components template 93 00:06:45,500 --> 00:06:54,310 file will only contain the header and the footer at the bottom. 94 00:06:56,450 --> 00:06:59,065 So, you see that now, 95 00:06:59,065 --> 00:07:02,480 we have the views of the three components. 96 00:07:02,480 --> 00:07:04,370 The header, the menu, 97 00:07:04,370 --> 00:07:07,160 and the footer occupying the entire screen. 98 00:07:07,160 --> 00:07:10,940 So, these three components get those part of the screen for themselves. 99 00:07:10,940 --> 00:07:16,970 Let's save the changes and take a quick look at our application in the browser. 100 00:07:16,970 --> 00:07:19,855 Going to the application in the browser, 101 00:07:19,855 --> 00:07:22,895 you now see that the header has already occupied it's 102 00:07:22,895 --> 00:07:26,090 part of the screen up there, and obviously, 103 00:07:26,090 --> 00:07:28,400 since we have just prepared the component, 104 00:07:28,400 --> 00:07:30,245 it just says header works, 105 00:07:30,245 --> 00:07:31,879 and then down below here, 106 00:07:31,879 --> 00:07:36,180 the footer has also taken its place in the screen page. 107 00:07:36,180 --> 00:07:41,630 Now, we will now go ahead and update the templates for both the header and the footer 108 00:07:41,630 --> 00:07:47,625 so that we can nicely define our UI for our angular application. 109 00:07:47,625 --> 00:07:50,735 Let's begin the work on our footer. 110 00:07:50,735 --> 00:07:53,180 So, to get started on the footer, 111 00:07:53,180 --> 00:07:55,780 let's go to the footer's template file, 112 00:07:55,780 --> 00:08:02,355 and then we're going to replace this with the footer's newly designed template. 113 00:08:02,355 --> 00:08:03,920 Now, for your convenience, 114 00:08:03,920 --> 00:08:07,030 I have provided the code for you in the instructions. 115 00:08:07,030 --> 00:08:10,690 It will be wise to copy the entire code from there, 116 00:08:10,690 --> 00:08:12,155 and then paste it in here. 117 00:08:12,155 --> 00:08:15,715 Then, examine what this footer does. 118 00:08:15,715 --> 00:08:20,830 So here, you see that I have pasted in the code for my footer template. 119 00:08:20,830 --> 00:08:24,130 Now, I'm going to come back to this code a little bit later. 120 00:08:24,130 --> 00:08:28,045 If you have done the previous course on Bootstrap, 121 00:08:28,045 --> 00:08:33,580 you would see that this is the angular material way of implementing 122 00:08:33,580 --> 00:08:40,185 the same kind of structure for the footer that we have done in the Bootstrap course. 123 00:08:40,185 --> 00:08:43,965 Some of these things will be recognizable for you already, 124 00:08:43,965 --> 00:08:48,260 but let me complete the update to the footer template, 125 00:08:48,260 --> 00:08:57,085 and then also we will add in a few SCSS code into my footer component.SCSS file, 126 00:08:57,085 --> 00:09:02,100 and then take a look at how the footer now shapes up. 127 00:09:02,100 --> 00:09:05,675 So here, I have again pasted in the code 128 00:09:05,675 --> 00:09:09,585 from the exercise instructions that follow this video, 129 00:09:09,585 --> 00:09:18,880 to show the different SCSS classes that I've added into my footer. 130 00:09:18,880 --> 00:09:23,320 So, I have a few classes that I've defined here, 131 00:09:23,320 --> 00:09:27,380 I'm going to make use of them to define a part of my footer, 132 00:09:27,380 --> 00:09:29,570 and then similarly footer class here, 133 00:09:29,570 --> 00:09:32,765 and I have a SCSS mixing here, 134 00:09:32,765 --> 00:09:37,165 and some variables here which 135 00:09:37,165 --> 00:09:41,450 define various colors that I'm going to use in my angular application. 136 00:09:41,450 --> 00:09:44,145 So, let's save the changes that we have made. 137 00:09:44,145 --> 00:09:49,755 Let's take a look at the footer in its current incarnation, 138 00:09:49,755 --> 00:09:55,740 and then we'll come back and pay a quick visit to the code that I have included both 139 00:09:55,740 --> 00:10:02,345 in the footer components template file and the SCSS code here. 140 00:10:02,345 --> 00:10:06,835 Going to our angular application in the browser, wallah, 141 00:10:06,835 --> 00:10:11,545 there you have the new footer for our angular application. 142 00:10:11,545 --> 00:10:14,295 So, you can see that I have a few things here. 143 00:10:14,295 --> 00:10:19,840 These on the left edge are the various links 144 00:10:19,840 --> 00:10:25,975 to various pages that are going to form part of my Angular application. 145 00:10:25,975 --> 00:10:30,620 We're going to see how we do that as part of the next few exercises. 146 00:10:30,620 --> 00:10:35,110 Now, here I'm making use of the button component that 147 00:10:35,110 --> 00:10:39,795 is part of Angular material to define these links here, 148 00:10:39,795 --> 00:10:41,870 then I have the address here, 149 00:10:41,870 --> 00:10:46,810 and then I also use again buttons to define this sequence 150 00:10:46,810 --> 00:10:52,110 of buttons for the various social media links for my restaurant here. 151 00:10:52,110 --> 00:10:55,515 So, you can see that I have all these. 152 00:10:55,515 --> 00:10:57,470 For creating these, I use 153 00:10:57,470 --> 00:11:01,820 the Angular material support for small floating action buttons here, 154 00:11:01,820 --> 00:11:05,155 and that gives a nice structure for this. 155 00:11:05,155 --> 00:11:07,860 If you have seen the Bootstrap version of this, 156 00:11:07,860 --> 00:11:14,205 I like this much better than the Bootstrap version that I created in the previous course. 157 00:11:14,205 --> 00:11:19,730 So, our footer is now well in place. 158 00:11:19,730 --> 00:11:22,695 Let's quickly look at some of the code in the footer. 159 00:11:22,695 --> 00:11:27,890 Now, I won't explain that in a whole lot of detail because that is to 160 00:11:27,890 --> 00:11:33,665 deal with more with the Angular material than Angular itself, 161 00:11:33,665 --> 00:11:36,780 but along the way by just looking at the structure of the code, 162 00:11:36,780 --> 00:11:39,045 you'll begin to see how 163 00:11:39,045 --> 00:11:45,095 this Angular Material components can be used to define something like this. 164 00:11:45,095 --> 00:11:47,060 Going to the footer component, 165 00:11:47,060 --> 00:11:55,795 you see that I have a outer div here for which I have specified some angular layout, 166 00:11:55,795 --> 00:11:59,280 flex layout attributes here, 167 00:11:59,280 --> 00:12:01,895 so I say that fxLayout row, 168 00:12:01,895 --> 00:12:06,075 and then fxLayout sm and xs to be column. 169 00:12:06,075 --> 00:12:10,160 So, for small and extra small screen sizes is 170 00:12:10,160 --> 00:12:14,380 going to position all the content as columns, 171 00:12:14,380 --> 00:12:16,990 but for the larger screen sizes, 172 00:12:16,990 --> 00:12:18,300 it's going to position them as row. 173 00:12:18,300 --> 00:12:21,545 So, this is what gives me the nice structure for my footer. 174 00:12:21,545 --> 00:12:24,790 As you see in the UI div, 175 00:12:24,790 --> 00:12:28,810 I'm positioning all the content center-center here, 176 00:12:28,810 --> 00:12:31,495 and down below here, 177 00:12:31,495 --> 00:12:33,380 I define the first one. 178 00:12:33,380 --> 00:12:40,415 So, this math twist here that I'm using defines my links here. 179 00:12:40,415 --> 00:12:46,235 So, in this I'm using mat as to Angular material component, 180 00:12:46,235 --> 00:12:49,425 and inside there I am using the a with 181 00:12:49,425 --> 00:12:58,990 the mat button component attribute assigned to a to create these buttons here. 182 00:12:58,990 --> 00:13:02,255 Later on, I'm going to come back and add 183 00:13:02,255 --> 00:13:07,665 the actual code for this links in the subsequent exercises here. 184 00:13:07,665 --> 00:13:12,940 This is what helps me to create the list of links on the left side. 185 00:13:12,940 --> 00:13:14,920 This is the address that you see, 186 00:13:14,920 --> 00:13:17,420 this is fairly straightforward to look at. 187 00:13:17,420 --> 00:13:22,080 So, this is a div for which I am using fxFlex with 50, 188 00:13:22,080 --> 00:13:24,490 and the other one with fxFlex with 40. 189 00:13:24,490 --> 00:13:29,230 So, 40 means 40 percent and 50 means 50 percent, 190 00:13:29,230 --> 00:13:33,150 and here I'm using fxFlex offset 20 pixels. 191 00:13:33,150 --> 00:13:37,410 So, it moves this content right by 20 pixels. 192 00:13:37,410 --> 00:13:41,830 So, I have a 20 pixel space left on the left side for 193 00:13:41,830 --> 00:13:47,660 this particular div containing these links here. 194 00:13:47,660 --> 00:13:49,400 Then finally below here, 195 00:13:49,400 --> 00:13:55,850 I have this set of links that I am making use to 196 00:13:55,850 --> 00:14:02,340 create the bar with all the social media links there. 197 00:14:02,340 --> 00:14:06,330 So, I am using a with the mat icon button here. 198 00:14:06,330 --> 00:14:14,850 So, that is what creates the rounded buttons that you see in the footer there. 199 00:14:14,850 --> 00:14:16,150 Now, for each of these, 200 00:14:16,150 --> 00:14:18,640 I am applying the corresponding class here. 201 00:14:18,640 --> 00:14:21,745 So, you can notice that button Google Plus, button Facebook, 202 00:14:21,745 --> 00:14:27,590 all these classes are defined in my SCSS file there, 203 00:14:27,590 --> 00:14:31,540 where I have specified the colors for the background and so on for this, 204 00:14:31,540 --> 00:14:38,025 so that it matches the typical color scheme that these social media sites use. 205 00:14:38,025 --> 00:14:43,380 So, spend a little bit of time looking at this code here, 206 00:14:43,380 --> 00:14:49,435 and then you'll quickly get a sense of how the footer has been designed. 207 00:14:49,435 --> 00:14:54,520 Similarly, going to the footer components Sass code here, 208 00:14:54,520 --> 00:14:57,460 so you can see that I have defined various colors here. 209 00:14:57,460 --> 00:15:00,970 I'm using a mixing with the margin set up here, 210 00:15:00,970 --> 00:15:02,045 and then for my footer, 211 00:15:02,045 --> 00:15:04,695 I define the background color appropriately, 212 00:15:04,695 --> 00:15:10,150 and notice the various classes that I'm defining here 213 00:15:10,150 --> 00:15:12,910 a button Facebook for which the color and 214 00:15:12,910 --> 00:15:15,910 the background color I've defined for each one of them. 215 00:15:15,910 --> 00:15:18,300 So, that the corresponding color of 216 00:15:18,300 --> 00:15:22,835 that social media site is being used as the background color for each one of these. 217 00:15:22,835 --> 00:15:25,255 Now, in the Bootstrap course earlier, 218 00:15:25,255 --> 00:15:31,200 I had used the Bootstrap Social for achieving the same thing. 219 00:15:31,200 --> 00:15:34,920 That doesn't work very well with the Angular material, 220 00:15:34,920 --> 00:15:41,170 so that's why I just created my own set of Sass glasses here, 221 00:15:41,170 --> 00:15:46,380 and then add in the code that I need to create those buttons there. 222 00:15:46,380 --> 00:15:48,840 If you need to add more buttons, 223 00:15:48,840 --> 00:15:51,490 then just create more classes like these is corresponding to 224 00:15:51,490 --> 00:15:54,695 the buttons that you want to add into your application. 225 00:15:54,695 --> 00:15:57,355 So, that builds up our footer. 226 00:15:57,355 --> 00:16:01,995 Now, the header is the next part that we're going to target. 227 00:16:01,995 --> 00:16:04,770 Going to the header, will open the header 228 00:16:04,770 --> 00:16:09,320 components template file and you see what it contains. 229 00:16:09,320 --> 00:16:11,565 We're going to replace this with 230 00:16:11,565 --> 00:16:16,115 the template that I have given for you in the instructions that follow here. 231 00:16:16,115 --> 00:16:19,495 So, just go ahead and cut and paste that code in here, 232 00:16:19,495 --> 00:16:22,730 because this has nothing to do specifically with angular. 233 00:16:22,730 --> 00:16:26,620 So, that's why I'm just allowing you to cut and paste the code directly from there, 234 00:16:26,620 --> 00:16:29,060 saves some time for us. 235 00:16:29,060 --> 00:16:35,300 You can see that I have now replaced the headers template with some code here. 236 00:16:35,300 --> 00:16:37,230 Similarly, while we're at it, 237 00:16:37,230 --> 00:16:43,100 we will also add in some SCSS code for my header.components.SCSS file here, 238 00:16:43,100 --> 00:16:46,550 just go and copy the code from the instructions. 239 00:16:46,550 --> 00:16:48,845 Similarly, while we're at it, 240 00:16:48,845 --> 00:16:55,810 we will add in a few more SCSS classes to my main styles.SCSS file. 241 00:16:55,810 --> 00:16:58,480 So, into this main styles.SCSS file, 242 00:16:58,480 --> 00:17:03,850 I will add in sub colors and a couple of more classes into this. 243 00:17:03,850 --> 00:17:09,650 So, let's paste in the code from the instructions that I have given you. 244 00:17:09,650 --> 00:17:14,425 So, the update to the styles.SCSS file is now complete, 245 00:17:14,425 --> 00:17:18,165 so I have added in some colors here and mix in there, 246 00:17:18,165 --> 00:17:23,230 and then at the bottom I have added in a few more classes here which 247 00:17:23,230 --> 00:17:28,975 help me when I am designing my templates for my angular application. 248 00:17:28,975 --> 00:17:30,680 So, all these changes, 249 00:17:30,680 --> 00:17:32,120 let's save the changes, 250 00:17:32,120 --> 00:17:36,435 take a quick look at how my header looks like now in the application, 251 00:17:36,435 --> 00:17:41,735 and then we'll come back and quickly revisit the code that we have just included here. 252 00:17:41,735 --> 00:17:45,775 Going back to my Angular application in the browser, 253 00:17:45,775 --> 00:17:51,820 you now see the toolbar reappears in the header here, 254 00:17:51,820 --> 00:17:56,980 along with a few links in 255 00:17:56,980 --> 00:18:03,260 there and then an image representing the logo for my restaurant, 256 00:18:03,260 --> 00:18:12,095 and then here, you have something that we use the jumbotron file in the previous course. 257 00:18:12,095 --> 00:18:15,890 I'm going to just use a class called jumbotron to create this 258 00:18:15,890 --> 00:18:20,015 in the Angular application also, 259 00:18:20,015 --> 00:18:24,545 so here on the left side I have my restaurant's information and 260 00:18:24,545 --> 00:18:30,280 the restaurant's logo and left myself some space here for adding something in the future. 261 00:18:30,280 --> 00:18:36,610 So, here you see my application now taking shape with a header, 262 00:18:36,610 --> 00:18:38,745 with some links in there. 263 00:18:38,745 --> 00:18:41,070 Now, we're going to make use of this links in 264 00:18:41,070 --> 00:18:46,145 the next few exercises to setup my Angular application, 265 00:18:46,145 --> 00:18:52,220 and then the menu sitting in between and then down below here my footer. 266 00:18:52,220 --> 00:18:55,100 Going to my header components template file, 267 00:18:55,100 --> 00:19:00,830 you can now see how I have created the toolbar with the additional buttons here. 268 00:19:00,830 --> 00:19:03,740 So, you recall that we had the toolbar 269 00:19:03,740 --> 00:19:08,035 already in use in the app components template file, 270 00:19:08,035 --> 00:19:16,845 I have cut it from there and instead use the toolbar into the headers template here. 271 00:19:16,845 --> 00:19:18,915 Now, inside this toolbar, 272 00:19:18,915 --> 00:19:26,260 I've included some links with the button class applied to it and this is what 273 00:19:26,260 --> 00:19:34,745 allows me to create those links in the toolbar as a menu for my web application. 274 00:19:34,745 --> 00:19:40,855 Below there, I have created a div with the class container and jumbotron. 275 00:19:40,855 --> 00:19:46,650 That's the reason why I added the container and jumbotron classes into my SCSS file, 276 00:19:46,650 --> 00:19:50,480 so that I can make use of them within my templates here. 277 00:19:50,480 --> 00:19:51,910 So, for which again, 278 00:19:51,910 --> 00:20:01,025 I apply and some flex layout attributes here to help me design the screen there. 279 00:20:01,025 --> 00:20:06,500 Then you can see how I have used a couple of divs here with 280 00:20:06,500 --> 00:20:13,815 the fxFlex attribute applied accordingly to create the UI, 281 00:20:13,815 --> 00:20:16,385 for my application here. 282 00:20:16,385 --> 00:20:22,400 So, spend a little bit of time here to take a quick look at this code here to 283 00:20:22,400 --> 00:20:29,130 understand quickly how my layout for my header template has been created. 284 00:20:29,130 --> 00:20:30,620 It's not that complicated, 285 00:20:30,620 --> 00:20:32,825 once you have completed the Bootstrap course, 286 00:20:32,825 --> 00:20:35,619 this is not that difficult to understand. 287 00:20:35,619 --> 00:20:39,520 Along the way, you're also learning the angular flex layout and then 288 00:20:39,520 --> 00:20:44,105 also the angular material components here. 289 00:20:44,105 --> 00:20:48,619 Going to the SCSS file for the header component, 290 00:20:48,619 --> 00:20:52,300 you can see that I have added in some colors here and then a mix 291 00:20:52,300 --> 00:20:56,100 in and then also added in a jumbotron class here. 292 00:20:56,100 --> 00:20:58,275 Now, the container class is not here, 293 00:20:58,275 --> 00:21:01,315 the container class is in the main styles file. 294 00:21:01,315 --> 00:21:03,600 Because the container class is something that I'm going to 295 00:21:03,600 --> 00:21:06,010 use for many of the templates there. 296 00:21:06,010 --> 00:21:11,800 So, that's why, I added in the container class to the styles.SCSS file 297 00:21:11,800 --> 00:21:18,020 which is the common file for my entire angular application. 298 00:21:18,020 --> 00:21:21,375 So, there I've added in some additional colors here, 299 00:21:21,375 --> 00:21:24,670 and also I have created a mix in here, 300 00:21:24,670 --> 00:21:26,759 and then added in the container, 301 00:21:26,759 --> 00:21:29,980 the background primary, and the background accent colors, 302 00:21:29,980 --> 00:21:33,640 and then I'm also using another class called flexes spacer, 303 00:21:33,640 --> 00:21:37,575 which I'm going to make use of in one of the later exercises. 304 00:21:37,575 --> 00:21:41,400 All these steps are in preparation for what is going to 305 00:21:41,400 --> 00:21:45,150 come in the next several exercises. 306 00:21:45,150 --> 00:21:51,920 My Angular application has now taken a good shape in terms of the way the UI is laid out, 307 00:21:51,920 --> 00:21:58,155 so that I can now start introducing a lot more new features for angular. 308 00:21:58,155 --> 00:22:02,005 Paying one more visits to my Angular application in the browser, 309 00:22:02,005 --> 00:22:08,450 let me see how this application looks like in different screen sizes. 310 00:22:08,450 --> 00:22:11,430 So, this is the standard desktop screen size, 311 00:22:11,430 --> 00:22:17,020 so let's move to a smaller screen size and then see how the application looks like. 312 00:22:17,020 --> 00:22:21,690 So, this is a iPhone 6 Plus screen size, 313 00:22:21,690 --> 00:22:28,865 so you can see how the layout is different for the smaller screen size. 314 00:22:28,865 --> 00:22:35,115 So, my header is right up there and my menu at the bottom and the footer here, 315 00:22:35,115 --> 00:22:38,955 notice how the footer's different parts have been 316 00:22:38,955 --> 00:22:43,485 laid out differently for the extra small screen size. 317 00:22:43,485 --> 00:22:49,950 This is the same application in the landscape mode or an iPhone 6 Plus, 318 00:22:49,950 --> 00:22:58,205 so you can see that my header is laid out like that and the menu there and the footer. 319 00:22:58,205 --> 00:23:04,230 So, that shows you that I have leveraged the angular flex layout 320 00:23:04,230 --> 00:23:10,510 to be able to create different layouts for different screen sizes. 321 00:23:10,510 --> 00:23:14,395 So, again, if you have taken the Bootstrap course earlier, 322 00:23:14,395 --> 00:23:19,420 you'll begin to see how the responsive design with 323 00:23:19,420 --> 00:23:25,950 the angular flex layout can also be used to achieve similar results. 324 00:23:25,950 --> 00:23:29,790 So, with this, we complete this exercise. 325 00:23:29,790 --> 00:23:35,140 In this exercise, we have prepared our Angular application and made 326 00:23:35,140 --> 00:23:40,645 it ready for the rest of the exercises in this course. 327 00:23:40,645 --> 00:23:47,300 This is also a good time for you to do a git commit with the message header and footers.