1 00:00:00,000 --> 00:00:06,150 Now we will move on to 2 00:00:06,150 --> 00:00:09,045 our next exercise where we will create 3 00:00:09,045 --> 00:00:13,275 a new component and add it to our Angular application. 4 00:00:13,275 --> 00:00:17,430 Then, we will make use of that component to control a part 5 00:00:17,430 --> 00:00:22,380 of the screen that we have designed for our Angular application. 6 00:00:22,380 --> 00:00:27,380 The screen for our Angular application is pretty boring at the moment. 7 00:00:27,380 --> 00:00:32,240 All that we have is a toolbar at the top and then a blank, 8 00:00:32,240 --> 00:00:35,595 white screen here, but that also gives us ideas. 9 00:00:35,595 --> 00:00:39,560 We can now take additional content and then 10 00:00:39,560 --> 00:00:43,970 place that into this part of the screen here. How do we do that? 11 00:00:43,970 --> 00:00:46,850 We can create a new component and then hand 12 00:00:46,850 --> 00:00:49,460 over this part of the screen to that component and say, 13 00:00:49,460 --> 00:00:53,450 ''You take care of rendering whatever you want into that part of the screen.'' 14 00:00:53,450 --> 00:00:58,055 So, that view will be controlled by the new component. 15 00:00:58,055 --> 00:01:03,345 How do we do that? Let's go through the exercise now. 16 00:01:03,345 --> 00:01:06,610 To get started with the exercise, 17 00:01:06,610 --> 00:01:10,620 go to the exercise instructions that follow this particular video. 18 00:01:10,620 --> 00:01:12,555 Then in the exercise instructions, 19 00:01:12,555 --> 00:01:15,680 you will see some exercise resources, 20 00:01:15,680 --> 00:01:18,290 which is a zip file available to you. 21 00:01:18,290 --> 00:01:23,085 Download that zip file to your computer, 22 00:01:23,085 --> 00:01:28,320 and this will give you an images.zip files. 23 00:01:28,320 --> 00:01:36,340 So, just save it as images.zip file to your downloads folder, 24 00:01:36,340 --> 00:01:39,140 unzip it, and then this will give you 25 00:01:39,140 --> 00:01:42,200 an images folder containing 26 00:01:42,200 --> 00:01:46,700 a set of images that we're going to make use of in our application. 27 00:01:46,700 --> 00:01:51,379 Unzip the images.zip file that you just downloaded, 28 00:01:51,379 --> 00:01:56,415 and move that images.zip file into your project, 29 00:01:56,415 --> 00:01:58,130 and within your project, 30 00:01:58,130 --> 00:02:02,695 into the sources and assets folder here. 31 00:02:02,695 --> 00:02:08,645 So, again, move the images folder that you get by 32 00:02:08,645 --> 00:02:15,110 unzipping the images.zip file and then move that images folder into your application, 33 00:02:15,110 --> 00:02:17,465 so, inside your application, 34 00:02:17,465 --> 00:02:22,670 under sources and assets subfolder. 35 00:02:22,670 --> 00:02:26,975 These images that are supplied in here will be 36 00:02:26,975 --> 00:02:31,690 available for use within your Angular application. 37 00:02:31,690 --> 00:02:37,310 Now, we're going to make use of the Angular CLI to 38 00:02:37,310 --> 00:02:43,025 automatically generate a component for us and add it to our Angular application. 39 00:02:43,025 --> 00:02:45,750 So, in the terminal, 40 00:02:45,750 --> 00:02:50,420 go to the folder containing your Angular application and type 41 00:02:50,420 --> 00:02:56,960 ng generate component menu. 42 00:02:56,960 --> 00:03:00,570 So, we will name this component as the MenuComponent. 43 00:03:00,570 --> 00:03:03,980 This MenuComponent will contain the menu for 44 00:03:03,980 --> 00:03:08,390 the restaurant that we are preparing our Angular application for. 45 00:03:08,390 --> 00:03:10,460 So, when you type this, 46 00:03:10,460 --> 00:03:11,975 this will automatically generate 47 00:03:11,975 --> 00:03:16,350 the MenuComponent and then add it to your Angular application. 48 00:03:16,350 --> 00:03:19,970 This MenuComponent will be created and added into 49 00:03:19,970 --> 00:03:27,300 the source/app/menu folder of your application. 50 00:03:27,300 --> 00:03:33,050 So, it will create a set of files in the menu folder. 51 00:03:33,050 --> 00:03:35,550 So, you can see that it creates an SCSS file, 52 00:03:35,550 --> 00:03:38,310 an HTML file, and the ts file, 53 00:03:38,310 --> 00:03:40,630 and then something called the spectral ts file. 54 00:03:40,630 --> 00:03:42,495 We'll come back to that later. 55 00:03:42,495 --> 00:03:48,140 Then, also, it'll update your app module.ts file. 56 00:03:48,140 --> 00:03:52,920 So, let's go and take a look at what just happened when you 57 00:03:52,920 --> 00:03:58,415 created this MenuComponent and added it to your Angular application. 58 00:03:58,415 --> 00:04:01,040 Let's go to the Editor. 59 00:04:01,040 --> 00:04:03,930 Coming to our Editor, 60 00:04:03,930 --> 00:04:05,245 you'll now notice that, 61 00:04:05,245 --> 00:04:06,650 in the app folder, 62 00:04:06,650 --> 00:04:09,380 there is a new folder called menu there, 63 00:04:09,380 --> 00:04:16,210 and this menu folder contains all the MenuComponent related files here. 64 00:04:16,210 --> 00:04:22,385 The Angular CLI follows the Angular standard style guide. 65 00:04:22,385 --> 00:04:25,715 The style guide suggests that each component should be placed 66 00:04:25,715 --> 00:04:29,765 into its own folder as are seen here, 67 00:04:29,765 --> 00:04:34,220 and I pretty much like this because I am very obsessive about 68 00:04:34,220 --> 00:04:38,840 keeping it clean hierarchy for my application folders here. 69 00:04:38,840 --> 00:04:41,825 So, this works very well for me. 70 00:04:41,825 --> 00:04:44,545 Some people like a flat hierarchy, 71 00:04:44,545 --> 00:04:46,570 but I just get confused with that part. 72 00:04:46,570 --> 00:04:51,455 So, I prefer storing each component in its own folder. 73 00:04:51,455 --> 00:04:53,480 So, it works good for me. 74 00:04:53,480 --> 00:04:58,430 Now, if you open the app module.ts file, 75 00:04:58,430 --> 00:05:02,390 you will notice that the app module.ts file has been updated 76 00:05:02,390 --> 00:05:06,810 by including another import into the app module.ts file. 77 00:05:06,810 --> 00:05:09,435 So, you see that, along with the AppComponent, 78 00:05:09,435 --> 00:05:15,235 the MenuComponent has automatically been added in as an import to your app module. 79 00:05:15,235 --> 00:05:17,570 So, this means that the MenuComponent is now 80 00:05:17,570 --> 00:05:20,470 available for your Angular application to be used. 81 00:05:20,470 --> 00:05:26,590 Also, if you check the declarations property inside the NgModule decorator, 82 00:05:26,590 --> 00:05:29,160 you will see that in the declarations property, 83 00:05:29,160 --> 00:05:31,465 in addition to the AppComponent, 84 00:05:31,465 --> 00:05:34,120 you also have the MenuComponent included. 85 00:05:34,120 --> 00:05:37,270 This is the reason why I love Angular CLI, 86 00:05:37,270 --> 00:05:40,035 because it simplifies all this worked for me. 87 00:05:40,035 --> 00:05:41,945 If I were to do it by hand, 88 00:05:41,945 --> 00:05:48,710 I will have to manually go into the app module.ts and then type in all this code there, 89 00:05:48,710 --> 00:05:53,830 and there is a high probability that I will end up making mistakes there. 90 00:05:53,830 --> 00:05:57,800 So, we're saving ourselves a lot of trouble by using the Angular CLI. 91 00:05:57,800 --> 00:05:59,720 So, that's why I have fallen in love with 92 00:05:59,720 --> 00:06:04,455 Angular CLI for creating my Angular applications. 93 00:06:04,455 --> 00:06:07,965 So, with that, we have set up 94 00:06:07,965 --> 00:06:11,570 our MenuComponent to be available for our Angular application. 95 00:06:11,570 --> 00:06:14,505 Now, where am I going to make use of the MenuComponent? 96 00:06:14,505 --> 00:06:21,460 I'm going to make use of the MenuComponent inside my AppComponents template. 97 00:06:21,460 --> 00:06:25,275 So, I will go to the AppComponents template and then 98 00:06:25,275 --> 00:06:29,810 include the MenuComponent here in my AppComponent. 99 00:06:29,810 --> 00:06:37,795 So, that will essentially handover that part of the screen to my MenuComponent. 100 00:06:37,795 --> 00:06:38,980 How do we do that? 101 00:06:38,980 --> 00:06:44,300 To do that, we'll first take a quick look at the MenuComponent.ts file. 102 00:06:44,300 --> 00:06:47,425 So, when you open the MenuComponent.ts file, 103 00:06:47,425 --> 00:06:54,225 you'll see that the selector for the MenuComponent has been defined as app-menu. 104 00:06:54,225 --> 00:07:02,615 So, this is the standard selector name that the Angular CLI gives for your components. 105 00:07:02,615 --> 00:07:04,840 You can change this if you want, 106 00:07:04,840 --> 00:07:07,970 but whatever selector you specify here, 107 00:07:07,970 --> 00:07:15,670 that would form the tags that you use to include it into your template file. 108 00:07:15,670 --> 00:07:20,195 So, going back to AppComponent.html, 109 00:07:20,195 --> 00:07:23,795 now, if I want to include the menu file in here, 110 00:07:23,795 --> 00:07:24,930 so I will just say, 111 00:07:24,930 --> 00:07:31,775 app menu tag and voila, 112 00:07:31,775 --> 00:07:35,360 that part of the screen is now handed over to my MenuComponent, 113 00:07:35,360 --> 00:07:40,640 and it's up to the MenuComponent to decide what it wants to place in there. 114 00:07:40,640 --> 00:07:42,420 So, whatever is defined, 115 00:07:42,420 --> 00:07:49,535 the MenuComponents template will be placed into place in here. 116 00:07:49,535 --> 00:07:53,630 So, now, all that we are left with is to go and prepare 117 00:07:53,630 --> 00:07:58,695 our MenuComponent to show the appropriate information for us. 118 00:07:58,695 --> 00:08:00,885 Let's save the changes, 119 00:08:00,885 --> 00:08:04,825 and then we will then switch to 120 00:08:04,825 --> 00:08:11,715 the next step where we will create the menu for our restaurant using the MenuComponent. 121 00:08:11,715 --> 00:08:14,845 Before I do that, 122 00:08:14,845 --> 00:08:17,625 what I am going to do is, 123 00:08:17,625 --> 00:08:19,830 go to the app folder here, 124 00:08:19,830 --> 00:08:22,090 and then in the app folder, 125 00:08:22,090 --> 00:08:29,660 I'm going to create a new subfolder and name that as shared subfolder. 126 00:08:29,660 --> 00:08:34,015 Now, any files that I'm going to share across various components, 127 00:08:34,015 --> 00:08:37,040 I'm going to put it into the shared folder here. 128 00:08:37,040 --> 00:08:39,160 Now, inside the shared folder, 129 00:08:39,160 --> 00:08:45,895 I'm going to create a new file named dish.ts. 130 00:08:45,895 --> 00:08:51,650 Inside this dish.ts, I'm going to create a class to define 131 00:08:51,650 --> 00:08:59,050 a dish and make it available for the remaining components to use. 132 00:08:59,050 --> 00:09:02,555 So, to define a TypeScript class here, 133 00:09:02,555 --> 00:09:04,240 I will say export, 134 00:09:04,240 --> 00:09:07,525 so I'm exporting this TypeScript class here, 135 00:09:07,525 --> 00:09:13,550 export class, and then I will name the class as dish. 136 00:09:13,550 --> 00:09:16,230 Inside this dish class, 137 00:09:16,230 --> 00:09:20,175 I can now define various properties. 138 00:09:20,175 --> 00:09:21,550 So, for the dish class, 139 00:09:21,550 --> 00:09:23,050 I will define one property, 140 00:09:23,050 --> 00:09:27,425 which is an ID, which I define as a string. 141 00:09:27,425 --> 00:09:31,330 Now, notice, if you are coming from the JavaScript world, 142 00:09:31,330 --> 00:09:35,975 in JavaScript, you don't need to specify the type of any variable. 143 00:09:35,975 --> 00:09:43,380 TypeScript brings in this facility for you to specify the type for each variable. 144 00:09:43,380 --> 00:09:46,405 So, if you specify name, column, and string, 145 00:09:46,405 --> 00:09:51,785 that means that the name variable will be always of the string type. 146 00:09:51,785 --> 00:09:55,595 So, if you try to assign an integer to the name, 147 00:09:55,595 --> 00:09:58,400 then TypeScript compiler will automatically 148 00:09:58,400 --> 00:10:01,850 catch that for you and then tell you that there is an error. 149 00:10:01,850 --> 00:10:04,855 That's the reason, using TypeScript, 150 00:10:04,855 --> 00:10:08,155 you can reduce the number of errors that you might cause. 151 00:10:08,155 --> 00:10:11,850 JavaScript traditionally doesn't do this error 152 00:10:11,850 --> 00:10:16,790 checking because it doesn't have any concept of datatypes. 153 00:10:16,790 --> 00:10:22,025 But if you're coming from a traditional programming language like C++ or Java, 154 00:10:22,025 --> 00:10:24,945 you're very familiar with the datatypes, 155 00:10:24,945 --> 00:10:28,565 the primitive datatypes, and 156 00:10:28,565 --> 00:10:33,290 other kinds of datatypes that are already defined into the language. 157 00:10:33,290 --> 00:10:41,315 TypeScript brings that feature to JavaScript or rather as part of TypeScript, 158 00:10:41,315 --> 00:10:47,865 and that enables you to define variables and attach types to those variables, 159 00:10:47,865 --> 00:10:49,950 hence the name TypeScript. 160 00:10:49,950 --> 00:10:51,500 So, for the dish, 161 00:10:51,500 --> 00:10:53,970 I'm going to create a name property. 162 00:10:53,970 --> 00:10:57,870 Then I'm going to create an image property, 163 00:10:57,870 --> 00:10:59,640 which is also a string. 164 00:10:59,640 --> 00:11:03,710 This image string will be a string which points to 165 00:11:03,710 --> 00:11:08,635 the URL of the image that I'm going to use for this particular dish. 166 00:11:08,635 --> 00:11:18,230 Then I will define a category for this dish as also another string featured as Boolean, 167 00:11:18,230 --> 00:11:21,130 label as a string. 168 00:11:21,150 --> 00:11:31,810 Price as a string and then description as a string. 169 00:11:31,810 --> 00:11:37,695 So, these are properties that I associate with the dish class. 170 00:11:37,695 --> 00:11:43,440 So, this will define various dishes in my menu of my restaurant, 171 00:11:43,440 --> 00:11:48,060 and for each dish I need to specify all these various properties. 172 00:11:48,060 --> 00:11:49,325 Now, why would I need that? 173 00:11:49,325 --> 00:11:54,400 That'll help me to construct the menu for my restaurant as you will see pretty soon. 174 00:11:54,400 --> 00:12:02,890 So, with this, we complete the definition of my class there. 175 00:12:02,890 --> 00:12:06,940 Let's save the changes to the dish.ts file. 176 00:12:06,940 --> 00:12:11,300 Now, this dish.ts file is exporting a class. 177 00:12:11,300 --> 00:12:15,820 Now, I can import this class into any of 178 00:12:15,820 --> 00:12:22,485 the component type script files of my application. 179 00:12:22,485 --> 00:12:28,550 Next, I'm going to switch to my menu.component.ts file. 180 00:12:28,550 --> 00:12:34,484 Inside the menu.component.ts file in addition to importing the component, 181 00:12:34,484 --> 00:12:38,420 I'll then also see that you are importing an OnInit there. 182 00:12:38,420 --> 00:12:41,885 We'll come to the OnInit part in one of the later exercises. 183 00:12:41,885 --> 00:12:45,475 I'll explain what that does in a later exercise. 184 00:12:45,475 --> 00:12:53,820 We'll also import the new class that we created called the Dish class. 185 00:12:53,820 --> 00:12:56,160 Why do we import this dish class? 186 00:12:56,160 --> 00:13:03,180 So that we can use that as a type for a variable that I am defining here. 187 00:13:03,180 --> 00:13:04,850 So, where is this dish class? 188 00:13:04,850 --> 00:13:13,955 It is in../shared/dish folder. 189 00:13:13,955 --> 00:13:17,890 So, this is in the shared dish folder above there. 190 00:13:17,890 --> 00:13:22,460 Then you'll see that we have defined the menu component here. 191 00:13:22,460 --> 00:13:23,640 So, you can see that it says, 192 00:13:23,640 --> 00:13:27,950 "Export class menu component" and then it says, "Implement on it." 193 00:13:27,950 --> 00:13:30,630 We're going to come back to that in a little bit later. 194 00:13:30,630 --> 00:13:37,130 You also see that there is a constructor and there is one more method here called ngOnit. 195 00:13:37,130 --> 00:13:40,170 We're going to use these in some of the later exercises. 196 00:13:40,170 --> 00:13:42,970 So, let's just leave it there as such and we'll 197 00:13:42,970 --> 00:13:46,565 come back to understand what that is in a short while. 198 00:13:46,565 --> 00:13:48,940 Also, notice that for this component, 199 00:13:48,940 --> 00:13:52,040 the template is defined in menu component dot HTML, 200 00:13:52,040 --> 00:13:56,070 and the style URLs defined there. 201 00:13:56,070 --> 00:14:02,170 Now, in addition, into my menu component class, 202 00:14:02,170 --> 00:14:07,100 I'm going to include a new variable called as 203 00:14:07,100 --> 00:14:14,660 dishes which would be an array of the dish type. 204 00:14:14,660 --> 00:14:21,540 Okay? Then I'm going to simply include the set of 205 00:14:21,540 --> 00:14:29,955 dishes into my dishes variable that I've defined here. 206 00:14:29,955 --> 00:14:35,040 Now, to type all the thing in by hand is going to take me a lot of time. 207 00:14:35,040 --> 00:14:39,060 So instead, what I would suggest for you to do is just go and copy 208 00:14:39,060 --> 00:14:45,780 the content directly from the instructions that follow this video. 209 00:14:45,780 --> 00:14:47,350 So, that's what I'm going to do. 210 00:14:47,350 --> 00:14:50,810 Then come back and paste that in here. 211 00:14:50,810 --> 00:14:55,720 You can now see that I have cut and pasted the information for 212 00:14:55,720 --> 00:15:00,120 all my dishes from the instructions in here. 213 00:15:00,120 --> 00:15:07,045 So, this completes the array of all the dishes that are defined in my instructions. 214 00:15:07,045 --> 00:15:11,035 So, that's the easiest way of getting hold of this information. 215 00:15:11,035 --> 00:15:13,525 So, just cut and paste it from there. 216 00:15:13,525 --> 00:15:16,800 Now, notice that for this dish, 217 00:15:16,800 --> 00:15:20,885 each one of them is a JavaScript object here. 218 00:15:20,885 --> 00:15:25,240 So, that can be mapped into the corresponding type script class there. 219 00:15:25,240 --> 00:15:28,700 So, you can see that each JavaScript object has properties there, 220 00:15:28,700 --> 00:15:35,245 and these properties exactly match the properties that I defined for my dish class. 221 00:15:35,245 --> 00:15:37,080 So, once I define this, 222 00:15:37,080 --> 00:15:39,430 then these dishes will now become an array of 223 00:15:39,430 --> 00:15:42,020 dishes and this will now become available for 224 00:15:42,020 --> 00:15:48,420 me to use when I define my HTML template for my menu. 225 00:15:48,420 --> 00:15:53,715 Let's save the changes that we have done so far and then we'll 226 00:15:53,715 --> 00:15:59,410 open the menu.component.html file. 227 00:15:59,410 --> 00:16:02,580 So, we'll go to the menu.component.html file. 228 00:16:02,580 --> 00:16:06,280 You will see that in the menu.component.html file, 229 00:16:06,280 --> 00:16:11,390 you currently have just a P with menu works here. 230 00:16:11,390 --> 00:16:17,390 So, if you just pasted it in there and then seeing the application working, 231 00:16:17,390 --> 00:16:20,500 you'd have seen just this menu works on the screen. 232 00:16:20,500 --> 00:16:25,640 I'm going to replace this with my own template code here. 233 00:16:25,640 --> 00:16:31,230 This is where I'm going to take the help of the angular flex layout to help me 234 00:16:31,230 --> 00:16:37,125 to lay out my content well in my screen. 235 00:16:37,125 --> 00:16:38,885 So, to get started, 236 00:16:38,885 --> 00:16:41,490 I will start with a div, 237 00:16:41,490 --> 00:16:46,480 to which I will apply a class called container. 238 00:16:46,480 --> 00:16:49,710 I'm going to define the container class by using 239 00:16:49,710 --> 00:16:55,360 some CSS code a little bit later in this exercise. 240 00:16:55,360 --> 00:16:57,715 So, I will apply the class container here. 241 00:16:57,715 --> 00:17:04,640 I'm going to also define a property called fxlayout. 242 00:17:04,640 --> 00:17:07,545 An attribute called fxlayout. 243 00:17:07,545 --> 00:17:10,205 Now, this fxlayout is an attribute 244 00:17:10,205 --> 00:17:15,015 that the angular flex layout allows me to apply to a div. 245 00:17:15,015 --> 00:17:20,295 This specifies whether the various content 246 00:17:20,295 --> 00:17:25,440 that I include inside those div should be laid out either horizontally or vertically. 247 00:17:25,440 --> 00:17:28,755 So, I'm going to specify this to be a column. 248 00:17:28,755 --> 00:17:32,675 So, whatever content I include inside this div, 249 00:17:32,675 --> 00:17:36,105 will be laid out vertically one below the other on my screen. 250 00:17:36,105 --> 00:17:43,855 If you have seen the grid way of working with content in Bootstrap, 251 00:17:43,855 --> 00:17:47,100 you would see that this essentially tells me that I'm going to 252 00:17:47,100 --> 00:17:50,970 lay down everything into a single column down there. 253 00:17:50,970 --> 00:17:55,700 Don't confuse this column with Bootstrap's column from the Bootstrap's grid. 254 00:17:55,700 --> 00:17:57,185 They're two different things. 255 00:17:57,185 --> 00:18:01,290 Here, the attribute is fxlayout and I specify column. 256 00:18:01,290 --> 00:18:03,240 I can also specify this as row, 257 00:18:03,240 --> 00:18:07,470 which means that the content will be laid out horizontally. 258 00:18:07,470 --> 00:18:14,590 Now also, one more attribute I'm going to specify for this is fxLayoutGap, 259 00:18:14,590 --> 00:18:18,705 which I will specify as 10 pixel. 260 00:18:18,705 --> 00:18:23,330 So, what this means is that whatever content I include here 261 00:18:23,330 --> 00:18:27,690 will be separated from each other by 10-pixels gap between each one of them. 262 00:18:27,690 --> 00:18:33,745 From Bootstraps knowledge, you see what a cutoff is here. 263 00:18:33,745 --> 00:18:38,050 This defines a cutoff separation between 264 00:18:38,050 --> 00:18:42,925 two pieces of content in my application template. 265 00:18:42,925 --> 00:18:46,945 So, with this, we will close the div here. 266 00:18:46,945 --> 00:18:49,080 Now, inside this div, 267 00:18:49,080 --> 00:18:57,735 I'm going to define the actual content that will go into my menu.component.html file. 268 00:18:57,735 --> 00:19:04,035 Now in here, I'm going to make use of another component that 269 00:19:04,035 --> 00:19:10,745 material design provides to me called as an mat list component. 270 00:19:10,745 --> 00:19:14,470 So, this component allows me to create a list of 271 00:19:14,470 --> 00:19:19,215 items that I include into my template here. 272 00:19:19,215 --> 00:19:25,360 So, this is a angular material list component. 273 00:19:25,360 --> 00:19:30,980 From Bootstrap, you notice that in Bootstrap we had the media object. 274 00:19:30,980 --> 00:19:36,430 So, the mat list is like the media object in some sense from Bootstrap. 275 00:19:36,430 --> 00:19:39,470 Now to this, I am going to apply a class, 276 00:19:39,470 --> 00:19:42,095 an attribute called as fxFlex. 277 00:19:42,095 --> 00:19:49,990 Now, what this means is that this whole thing will be treated as one unit or one piece of 278 00:19:49,990 --> 00:19:58,180 content that they will be laid out by my flex layout here. 279 00:19:58,180 --> 00:20:01,100 So, if you are familiar with CSS flex layout. 280 00:20:01,100 --> 00:20:05,505 So, this is one piece of content that will be laid out by my CSS flex layout. 281 00:20:05,505 --> 00:20:09,420 So, apply fxFlex here, 282 00:20:09,420 --> 00:20:16,610 and then inside here I'm going to define mat-list-item. 283 00:20:16,610 --> 00:20:18,380 So, this is a list item here. 284 00:20:18,380 --> 00:20:22,250 So, from your HTML knowledge, 285 00:20:22,250 --> 00:20:28,090 if the LI tag that you use in HTML is similar to this here. 286 00:20:28,090 --> 00:20:31,240 So, this is an mg list item here. 287 00:20:31,240 --> 00:20:34,705 So obviously, inside this list item, 288 00:20:34,705 --> 00:20:39,220 you're going to be defining the list of things. 289 00:20:39,220 --> 00:20:45,750 Now, angular provides some structural directives that you can apply 290 00:20:45,750 --> 00:20:53,455 to your tags here that allows you to create your content. 291 00:20:53,455 --> 00:20:58,375 Now, I'm going to use one structural directive called ngFor. 292 00:20:58,375 --> 00:21:01,990 We will see how we use it in this template. 293 00:21:01,990 --> 00:21:04,050 Then later on after this exercise, 294 00:21:04,050 --> 00:21:07,250 I will explain briefly to you what the structural directives are and 295 00:21:07,250 --> 00:21:11,625 what the purpose they serve in defining your templates here. 296 00:21:11,625 --> 00:21:15,960 So, inside this empty list item, I'm going to say, 297 00:21:15,960 --> 00:21:21,480 star, note the syntax, star ngFor. 298 00:21:22,470 --> 00:21:25,500 So, this is the structural directive, 299 00:21:25,500 --> 00:21:29,585 the ngFor structural directive in angular. 300 00:21:29,585 --> 00:21:34,690 What this ngFor structural directive allows you to do is 301 00:21:34,690 --> 00:21:40,855 to iterate over an array of items. 302 00:21:40,855 --> 00:21:48,805 Remember that we defined dishes as an array of dish objects in our code. 303 00:21:48,805 --> 00:21:51,040 Now, in my template, 304 00:21:51,040 --> 00:21:54,095 I will have access to that dishes object. 305 00:21:54,095 --> 00:21:56,945 So in here, if I want to iterate over it, 306 00:21:56,945 --> 00:21:59,160 the way I specify it is I'll say, 307 00:21:59,160 --> 00:22:04,950 "Let dish of dishes." 308 00:22:04,950 --> 00:22:11,495 This is how the syntax works for the ngFor structural directive. 309 00:22:11,495 --> 00:22:14,020 So, let dish of dishes. 310 00:22:14,020 --> 00:22:21,805 What this means is that dishes is the array of dish objects. 311 00:22:21,805 --> 00:22:24,245 When we select say let dish of dishes, 312 00:22:24,245 --> 00:22:27,130 this will allow me to access each element of 313 00:22:27,130 --> 00:22:30,460 the array and then it helps me to iterate over the array. 314 00:22:30,460 --> 00:22:32,085 This is like a for loop, 315 00:22:32,085 --> 00:22:36,210 if you are familiar with for loops from programming. 316 00:22:36,210 --> 00:22:40,630 So, this acts like a for loop for you and then it helps you to iterate 317 00:22:40,630 --> 00:22:46,855 over all the elements of the dishes array here. 318 00:22:46,855 --> 00:22:51,050 This dish becomes a JavaScript object that allows me 319 00:22:51,050 --> 00:22:55,350 to access each element of that array there. 320 00:22:55,350 --> 00:23:00,680 Now, from this, we can also now get 321 00:23:00,680 --> 00:23:06,775 access to the properties of each individual object inside my dishes array. 322 00:23:06,775 --> 00:23:13,335 So, then, I can make use of them to define my template here. 323 00:23:13,335 --> 00:23:16,120 Let me lay out the template and then we'll go back and 324 00:23:16,120 --> 00:23:19,185 look at how these two are interrelated here. 325 00:23:19,185 --> 00:23:21,760 Now, inside my empty list item, 326 00:23:21,760 --> 00:23:28,480 I can include an image with the attribute as matListAvatar. 327 00:23:30,040 --> 00:23:38,625 So, this allows me to include an image and then with the source being specified here. 328 00:23:38,625 --> 00:23:44,275 Now interestingly, look at the syntax that I'm using here. 329 00:23:44,275 --> 00:23:48,380 Inside double braces, I'm going to say dish.image. 330 00:23:48,560 --> 00:23:55,985 What this means is that this is a one-way interpolation that we are talking about. 331 00:23:55,985 --> 00:23:58,885 Here, when I specify this, 332 00:23:58,885 --> 00:24:07,635 what this means is that this source will get the value of dish.image that has defined in 333 00:24:07,635 --> 00:24:10,515 my JavaScript object that I have defined in 334 00:24:10,515 --> 00:24:17,050 my type script class there and that is available for me to do the layout here. 335 00:24:17,050 --> 00:24:22,510 So, that the dish.image value will be available to me and also for this image, 336 00:24:22,510 --> 00:24:28,255 I will specify an alternative value as dish.name. 337 00:24:28,255 --> 00:24:33,770 Recall that my dish also had the name property available to 338 00:24:33,770 --> 00:24:39,240 me so that defines an image for my list here. 339 00:24:39,240 --> 00:24:42,460 You will pretty soon realize how this list looks like on 340 00:24:42,460 --> 00:24:46,010 the screen when we complete this template here. 341 00:24:46,010 --> 00:24:53,140 In addition, I'm going to use an h1 with matLine tag. 342 00:24:53,140 --> 00:24:56,500 Again, this is the use of 343 00:24:56,500 --> 00:25:04,900 the list angular material component for defining my template here. 344 00:25:04,900 --> 00:25:12,800 So, I say h1 matLine so this helps me to define a line here and then inside there, 345 00:25:12,800 --> 00:25:17,170 I'm going to use the double braces and say dish.name here. 346 00:25:17,170 --> 00:25:24,930 So, this allows me to get the value of the dish name there. 347 00:25:24,930 --> 00:25:33,140 So, that defines one line and then the in the next line I'm going to say p matLine. 348 00:25:33,140 --> 00:25:36,370 So, I'm going to use the p tag here and then close 349 00:25:36,370 --> 00:25:39,655 off the p tag and then inside the p tag, 350 00:25:39,655 --> 00:25:48,000 I'm going to use a span to define dish.description. 351 00:25:48,000 --> 00:25:52,025 So, if you are familiar with JavaScript objects, 352 00:25:52,025 --> 00:25:56,180 you now see how I am accessing the properties of 353 00:25:56,180 --> 00:26:02,030 my JavaScript object here, dish.description here. 354 00:26:02,030 --> 00:26:06,595 For note, running through this one more time 355 00:26:06,595 --> 00:26:13,630 the ngFor attribute allows me to iterate over an array of objects here. 356 00:26:13,630 --> 00:26:17,700 So, dishes here is an array of dish objects. 357 00:26:17,700 --> 00:26:20,865 So, when I say let dish of dishes, 358 00:26:20,865 --> 00:26:28,070 this dish will give me access to each element of 359 00:26:28,070 --> 00:26:32,170 my dishes array and I iterate over each element of the array 360 00:26:32,170 --> 00:26:36,525 and then I will be creating this content for each one of them. 361 00:26:36,525 --> 00:26:39,205 So, this empty list item, 362 00:26:39,205 --> 00:26:43,500 essentially acts like a for loop from 363 00:26:43,500 --> 00:26:47,830 your traditional computer language and then it iterates over 364 00:26:47,830 --> 00:26:52,890 the list of dishes and then lays out each one of them on my screen. 365 00:26:52,890 --> 00:26:54,895 So, with this change, 366 00:26:54,895 --> 00:27:00,145 let's save the menu component file. 367 00:27:00,145 --> 00:27:06,800 Next, we go to the app.module.ts and we need to import the matList module into this. 368 00:27:06,800 --> 00:27:11,840 So, we say, import MatListModule 369 00:27:11,840 --> 00:27:20,380 from angular/material/list.Once we have imported this there, 370 00:27:20,380 --> 00:27:25,390 then we go down and then update the imports in 371 00:27:25,390 --> 00:27:30,320 the Ng module decorator and add in 372 00:27:30,320 --> 00:27:36,435 the matList module to the list of imports there. 373 00:27:36,435 --> 00:27:42,430 This my app module.ts is now updated and then also, 374 00:27:42,430 --> 00:27:47,770 I'm going to go to the styles.scss file and then add 375 00:27:47,770 --> 00:27:53,575 in the container class here. 376 00:27:53,575 --> 00:27:55,890 What does the container class define here? 377 00:27:55,890 --> 00:28:00,995 The container class is margin 20 pixels 378 00:28:00,995 --> 00:28:07,830 and display flex and save the changes. 379 00:28:07,830 --> 00:28:12,210 Now, let's go and take a look at our webpage. 380 00:28:12,210 --> 00:28:14,180 Going to our web page. 381 00:28:14,180 --> 00:28:15,885 Voila. There you go. 382 00:28:15,885 --> 00:28:22,250 The menu for our restaurant shown in all its splendor on the screen. 383 00:28:22,250 --> 00:28:25,365 You see how this menu has been created. 384 00:28:25,365 --> 00:28:30,455 Look at the JavaScript object array that you have seen. 385 00:28:30,455 --> 00:28:35,250 Look at how each of the properties for the JavaScript object array has been used and 386 00:28:35,250 --> 00:28:40,490 mapped to the four items in my list. 387 00:28:40,490 --> 00:28:44,170 Look at how the corresponding images have been included here 388 00:28:44,170 --> 00:28:48,430 using the matListAvatar here. 389 00:28:48,430 --> 00:28:55,150 So, this creates round images here and then note how the name of 390 00:28:55,150 --> 00:29:03,155 the dish is displayed here and then the description of the dish included here. 391 00:29:03,155 --> 00:29:09,010 Wonderful. Now, we have the menu for our restaurant on 392 00:29:09,010 --> 00:29:14,925 the screen using a menu component in Angular. 393 00:29:14,925 --> 00:29:17,625 This completes this exercise. 394 00:29:17,625 --> 00:29:21,860 In this exercise, we learned how to create a new component. 395 00:29:21,860 --> 00:29:25,165 add it into our Angular application, 396 00:29:25,165 --> 00:29:28,270 how to include that component into the template of 397 00:29:28,270 --> 00:29:32,365 another component so that creates the hierarchy of the components. 398 00:29:32,365 --> 00:29:39,255 Then we saw how we can make use of the angular flex layout and also 399 00:29:39,255 --> 00:29:42,700 the material design components to design 400 00:29:42,700 --> 00:29:47,560 the template for our menu component to display the content here. 401 00:29:47,560 --> 00:29:52,710 Now, if you ask me how do I remember all these things. 402 00:29:52,710 --> 00:29:54,535 Well, to be honest, 403 00:29:54,535 --> 00:29:59,435 you can't remember everything but you need to understand the approach. 404 00:29:59,435 --> 00:30:03,035 That is more important than trying to memorize any of these things. 405 00:30:03,035 --> 00:30:06,735 Now, if you ask me where do I get the information about 406 00:30:06,735 --> 00:30:12,740 the list component from angular material. 407 00:30:12,740 --> 00:30:16,560 We can sort the angular material documentation and there you 408 00:30:16,560 --> 00:30:21,005 will have the details about how a list component should be prepared. 409 00:30:21,005 --> 00:30:29,405 Now, where do we get the details about how we design a component in angular? 410 00:30:29,405 --> 00:30:33,240 We just examined a little bit of that and then in this exercise, 411 00:30:33,240 --> 00:30:41,080 we learned how to create a new component and then apply that in our angular application. 412 00:30:41,080 --> 00:30:44,790 So, this is a good point for you to do a 413 00:30:44,790 --> 00:30:48,905 get comment with the message components part one. 414 00:30:48,905 --> 00:30:50,540 In the next exercise, 415 00:30:50,540 --> 00:30:54,895 we're going to improve upon this a little more using another kind 416 00:30:54,895 --> 00:31:00,920 of angular material component for laying out the content on my screen.