1 00:00:06,360 --> 00:00:07,260 - In this section 2 00:00:07,260 --> 00:00:10,170 we're going to start looking at components in more detail. 3 00:00:10,170 --> 00:00:12,510 It's important that you understand how components work, 4 00:00:12,510 --> 00:00:13,560 what are they, 5 00:00:13,560 --> 00:00:15,540 so that we can test them later on. 6 00:00:15,540 --> 00:00:19,080 So in an Angular application, a component is a class 7 00:00:19,080 --> 00:00:23,460 that has data and renders that data in an HTML page. 8 00:00:23,460 --> 00:00:25,740 So a good way to think about it is like this: 9 00:00:25,740 --> 00:00:27,063 We have a class, 10 00:00:27,960 --> 00:00:31,080 a component class that has some data, 11 00:00:31,080 --> 00:00:36,080 and the component class has an associated HTML template file 12 00:00:36,330 --> 00:00:40,920 which displays the data contained inside the component. 13 00:00:40,920 --> 00:00:43,590 So when you create an application initially 14 00:00:43,590 --> 00:00:44,970 with the Angular CLI, 15 00:00:44,970 --> 00:00:48,840 it creates just one component, a class called app component, 16 00:00:48,840 --> 00:00:51,060 which is just kinda like the root part component 17 00:00:51,060 --> 00:00:52,380 in your application. 18 00:00:52,380 --> 00:00:54,210 What we'll do now in this section 19 00:00:54,210 --> 00:00:56,760 is we'll see how to create additional components. 20 00:00:56,760 --> 00:00:59,220 A typical Angular application will have 21 00:00:59,220 --> 00:01:01,320 dozens or hundreds of components, 22 00:01:01,320 --> 00:01:05,040 each component represents one part of the user interface. 23 00:01:05,040 --> 00:01:07,350 So for example, you might define a component 24 00:01:07,350 --> 00:01:09,570 called header, or footer, 25 00:01:09,570 --> 00:01:13,320 or menu bar, or advertising panel. 26 00:01:13,320 --> 00:01:16,950 So each component is a separate class with its own data 27 00:01:16,950 --> 00:01:21,300 and its own html fragment to display part of your webpage. 28 00:01:21,300 --> 00:01:24,450 The whole webpage is like a joining together 29 00:01:24,450 --> 00:01:25,283 of all the components. 30 00:01:25,283 --> 00:01:30,060 A component's like a jigsaw piece in the bigger jigsaw. 31 00:01:30,060 --> 00:01:32,130 So we're gonna look at an example, 32 00:01:32,130 --> 00:01:34,380 Example4/HelloWorld, 33 00:01:34,380 --> 00:01:38,880 I've already written that example, and then here it is. 34 00:01:38,880 --> 00:01:42,423 A usual kind of arrangement in the src folder, 35 00:01:43,380 --> 00:01:45,903 the interesting code is in the app folder. 36 00:01:46,830 --> 00:01:51,830 As you will see, I have generated another component 37 00:01:52,890 --> 00:01:54,090 called header. 38 00:01:54,090 --> 00:01:57,210 We're gonna have a look at the header component in a moment, 39 00:01:57,210 --> 00:02:00,630 before we do that, just a quick reminder, 40 00:02:00,630 --> 00:02:03,120 each component has 4 files. 41 00:02:03,120 --> 00:02:05,433 A file that defines the component class, 42 00:02:06,570 --> 00:02:09,483 a file that renders the- that can test it, 43 00:02:10,530 --> 00:02:13,680 a file that renders the component as HTML, 44 00:02:13,680 --> 00:02:17,040 and a file that styles the HTML to look nice. 45 00:02:17,040 --> 00:02:19,380 So each component has 4 files, 46 00:02:19,380 --> 00:02:22,050 and they all have the same kind of name, 47 00:02:22,050 --> 00:02:23,583 app.component, 48 00:02:24,630 --> 00:02:27,120 the class, the test, 49 00:02:27,120 --> 00:02:29,700 the HTML template to display it, 50 00:02:29,700 --> 00:02:32,970 and the CSS StyleSheet to make it look nice. 51 00:02:32,970 --> 00:02:35,760 So the application component is in many ways 52 00:02:35,760 --> 00:02:38,670 a special component, it is the root component 53 00:02:38,670 --> 00:02:39,960 in your application, 54 00:02:39,960 --> 00:02:43,500 so it lives kind of directly in the app folder, 55 00:02:43,500 --> 00:02:44,880 but when you create other components 56 00:02:44,880 --> 00:02:47,820 like header and footer, they get put by default 57 00:02:47,820 --> 00:02:50,040 into a separate sub-folder, 58 00:02:50,040 --> 00:02:51,990 so I'll show you how I did this in a moment, 59 00:02:51,990 --> 00:02:55,530 I generated a component called header, 60 00:02:55,530 --> 00:02:59,760 it was put into a separate folder, but it also had 4 files. 61 00:02:59,760 --> 00:03:02,130 Every component has 4 files, 62 00:03:02,130 --> 00:03:06,810 and every component goes into a folder with the same name, 63 00:03:06,810 --> 00:03:09,180 apart from the app component which is kind of like 64 00:03:09,180 --> 00:03:10,563 sitting at the top level. 65 00:03:11,460 --> 00:03:15,630 So I've generated another component called header, 66 00:03:15,630 --> 00:03:17,460 let's see how to do that. 67 00:03:17,460 --> 00:03:20,760 To generate a component, you open up a command window, 68 00:03:20,760 --> 00:03:25,760 you run the Angular CLI NG and you generate a component. 69 00:03:26,250 --> 00:03:29,550 A bit earlier we generated a class, 70 00:03:29,550 --> 00:03:31,470 now we're going to generate a component. 71 00:03:31,470 --> 00:03:35,100 Always use lowercase letters and hyphens for the names. 72 00:03:35,100 --> 00:03:38,820 This generated the header component, 73 00:03:38,820 --> 00:03:41,760 and as you've just seen it created a folder 74 00:03:41,760 --> 00:03:44,340 called- underneath src/app, 75 00:03:44,340 --> 00:03:47,730 the Angular CLI always puts the components into a folder 76 00:03:47,730 --> 00:03:49,950 named after the component. 77 00:03:49,950 --> 00:03:52,710 And in there, it generated 4 files. 78 00:03:52,710 --> 00:03:54,600 The component class, 79 00:03:54,600 --> 00:03:57,990 an HTML template to display it's data, 80 00:03:57,990 --> 00:04:00,270 A CSS StyleSheet for styling purposes, 81 00:04:00,270 --> 00:04:05,190 and a test spec to test the code in our component class. 82 00:04:05,190 --> 00:04:06,240 Okay, so we've seen that, 83 00:04:06,240 --> 00:04:07,860 I'm going to create another component 84 00:04:07,860 --> 00:04:09,750 just because I want to. 85 00:04:09,750 --> 00:04:13,650 So I'm gonna go into the example for HelloWorld folder, 86 00:04:13,650 --> 00:04:17,733 I'm going to generate a new component. 87 00:04:18,900 --> 00:04:21,120 If I can have a header component, then maybe 88 00:04:21,120 --> 00:04:23,130 I can also have a footer component. 89 00:04:23,130 --> 00:04:26,760 Let's generate a new component called footer, 90 00:04:26,760 --> 00:04:29,040 it will create a folder called footer, 91 00:04:29,040 --> 00:04:31,140 well src/app/footer, 92 00:04:31,140 --> 00:04:33,150 and in there it will generate the 4 files. 93 00:04:33,150 --> 00:04:35,010 The footer TypeScript file, 94 00:04:35,010 --> 00:04:36,330 plus the spec, 95 00:04:36,330 --> 00:04:39,000 plus the HTML template to display it, 96 00:04:39,000 --> 00:04:41,520 and the StyleSheet to style it. 97 00:04:41,520 --> 00:04:44,070 So we can see in the footer folder, 98 00:04:44,070 --> 00:04:46,080 its created those 4 files. 99 00:04:46,080 --> 00:04:50,640 Also, interestingly, it added my component into the module. 100 00:04:50,640 --> 00:04:52,800 I mentioned the module a bit earlier, 101 00:04:52,800 --> 00:04:55,620 the module is kinda like a container, 102 00:04:55,620 --> 00:04:58,500 it's a special class in an Angular application 103 00:04:58,500 --> 00:05:00,990 that basically defines all of the components 104 00:05:00,990 --> 00:05:02,550 in your application. 105 00:05:02,550 --> 00:05:04,620 When an application starts in Angular, 106 00:05:04,620 --> 00:05:06,870 pretty much the first thing it does is to look in the module 107 00:05:06,870 --> 00:05:10,620 to see what components do you have in your application. 108 00:05:10,620 --> 00:05:13,860 So the module registers all components, 109 00:05:13,860 --> 00:05:18,860 so the Angular CLI tool has automatically updated the module 110 00:05:19,350 --> 00:05:21,930 to include a reference to my component, 111 00:05:21,930 --> 00:05:23,370 that's quite nice. 112 00:05:23,370 --> 00:05:26,340 The module needs to know about every component 113 00:05:26,340 --> 00:05:27,180 in your application, 114 00:05:27,180 --> 00:05:29,070 so basically it knows how to create them 115 00:05:29,070 --> 00:05:30,810 in the user interface. 116 00:05:30,810 --> 00:05:32,820 So we'll have a look at that in a moment. 117 00:05:32,820 --> 00:05:36,750 Right, so here is the code that's generated by default 118 00:05:36,750 --> 00:05:37,800 for a component. 119 00:05:37,800 --> 00:05:40,890 So for the header component, in src/app/header, 120 00:05:40,890 --> 00:05:43,500 this is the source code for the component class. 121 00:05:43,500 --> 00:05:46,907 The name of the class here, HeaderComponent, 122 00:05:46,907 --> 00:05:48,270 it implements an interface. 123 00:05:48,270 --> 00:05:50,220 TypeScript has interfaces, 124 00:05:50,220 --> 00:05:52,650 and there's an interface called OnInit. 125 00:05:52,650 --> 00:05:55,290 We'll talk about this later on, it's kind of like 126 00:05:55,290 --> 00:05:58,620 when a component is created the OnInit interface 127 00:05:58,620 --> 00:06:02,970 allows you to do some additional initialization 128 00:06:02,970 --> 00:06:06,240 just before the component is rendered, 129 00:06:06,240 --> 00:06:08,550 basically to receive input parameters. 130 00:06:08,550 --> 00:06:10,890 So anyway, this is the code it has generated, 131 00:06:10,890 --> 00:06:14,400 my component implements the OnInit interface, 132 00:06:14,400 --> 00:06:16,410 and that's why it has this method here. 133 00:06:16,410 --> 00:06:20,460 This method is specified by the OnInit interface. 134 00:06:20,460 --> 00:06:22,983 You can put code in here to do additional component 135 00:06:22,983 --> 00:06:25,710 that basically runs after your constructor. 136 00:06:25,710 --> 00:06:27,630 When your component is created 137 00:06:27,630 --> 00:06:29,790 to be displayed in the webpage, 138 00:06:29,790 --> 00:06:31,920 Angular will call the constructor 139 00:06:31,920 --> 00:06:33,960 to initialize the component, 140 00:06:33,960 --> 00:06:37,980 and then a bit later it will call the ngOnInit method 141 00:06:37,980 --> 00:06:40,590 to do any additional initialization 142 00:06:40,590 --> 00:06:44,610 just before the component is rendered on the page. 143 00:06:44,610 --> 00:06:46,320 Okay, so there we are, there's some theory we will 144 00:06:46,320 --> 00:06:48,150 need to come back to later. 145 00:06:48,150 --> 00:06:51,420 Notice that the component is decorated 146 00:06:51,420 --> 00:06:54,240 by a component decorator. 147 00:06:54,240 --> 00:06:57,090 In Angular, or rather in TypeScript, 148 00:06:57,090 --> 00:06:59,280 this syntax is called a decorator, 149 00:06:59,280 --> 00:07:03,060 it's a bit like an annotation in Java, 150 00:07:03,060 --> 00:07:05,460 or a decorator in Python, 151 00:07:05,460 --> 00:07:07,407 or an attribute in C#. 152 00:07:08,340 --> 00:07:13,020 What it does is it metadata about your component, 153 00:07:13,020 --> 00:07:15,720 so this decorator syntax here, 154 00:07:15,720 --> 00:07:18,693 it basically qualifies the component class, 155 00:07:19,680 --> 00:07:21,933 specifically it says, 156 00:07:22,770 --> 00:07:23,603 what does it say? 157 00:07:23,603 --> 00:07:28,603 It says there will usually be data in your component, 158 00:07:29,310 --> 00:07:31,440 and that data needs to be displayed, 159 00:07:31,440 --> 00:07:36,440 this is the name of the HTML file that it will use, 160 00:07:36,960 --> 00:07:39,510 Angular will use, to display your data. 161 00:07:39,510 --> 00:07:41,280 In the current folder, 162 00:07:41,280 --> 00:07:44,190 it will pick up header.component.html, 163 00:07:44,190 --> 00:07:47,610 that HTML file will basically render whatever data 164 00:07:47,610 --> 00:07:48,443 you might have in here. 165 00:07:48,443 --> 00:07:49,960 That's client side data-binding 166 00:07:51,120 --> 00:07:53,070 so that's important. 167 00:07:53,070 --> 00:07:55,140 By the way, you can have some StyleSheets, 168 00:07:55,140 --> 00:07:59,610 it will say these are the CSS files that it will apply 169 00:07:59,610 --> 00:08:00,870 just for this component. 170 00:08:00,870 --> 00:08:03,510 If your component has it's own particular styling 171 00:08:03,510 --> 00:08:06,030 just for headers, you can put them into 172 00:08:06,030 --> 00:08:08,220 your header.component.css, 173 00:08:08,220 --> 00:08:11,100 and that CSS will automatically be imported 174 00:08:11,100 --> 00:08:14,133 into the HTML to give it some nice appearance. 175 00:08:15,120 --> 00:08:18,180 And then finally, and this bit will become more apparent 176 00:08:18,180 --> 00:08:21,300 in a few minutes, we also have a selector. 177 00:08:21,300 --> 00:08:23,733 The selector here is like a tag name, 178 00:08:24,630 --> 00:08:29,220 and the way it works is components get created by Angular 179 00:08:29,220 --> 00:08:31,890 when Angular sees the selector, 180 00:08:31,890 --> 00:08:35,640 so this basically says this selector corresponds 181 00:08:35,640 --> 00:08:37,050 to that class. 182 00:08:37,050 --> 00:08:39,450 What that means, if some other component 183 00:08:39,450 --> 00:08:42,033 somewhere in the webpage said this: 184 00:08:43,380 --> 00:08:46,353 app-header, 185 00:08:48,060 --> 00:08:51,330 it's XML syntax so you'd have to make it like this, 186 00:08:51,330 --> 00:08:53,160 end app-header, 187 00:08:53,160 --> 00:08:56,730 basically the selector says this is the tag name 188 00:08:56,730 --> 00:08:59,460 that you need to use to create this component. 189 00:08:59,460 --> 00:09:02,280 So when Angular is rendering your application, 190 00:09:02,280 --> 00:09:04,860 whenever it sees this selector, 191 00:09:04,860 --> 00:09:08,850 it will know to basically display your component. 192 00:09:08,850 --> 00:09:12,390 So that's what the selector says, use this tagname 193 00:09:12,390 --> 00:09:14,940 to create an instance of this component 194 00:09:14,940 --> 00:09:17,823 using this kind of syntax up here. 195 00:09:19,170 --> 00:09:22,041 Okay, so hopefully that makes sense, 196 00:09:22,041 --> 00:09:24,390 I guess the next thing we can do is to have a look 197 00:09:24,390 --> 00:09:26,640 at the HTML file and the StyleSheet 198 00:09:26,640 --> 00:09:28,830 to see what is actually going to be rendered. 199 00:09:28,830 --> 00:09:31,380 Whenever this components rendered, it will basically 200 00:09:31,380 --> 00:09:35,190 invoke the HTML to display- to figure out what to display. 201 00:09:35,190 --> 00:09:38,820 So let's have a look at the HTML file and the CSS. 202 00:09:38,820 --> 00:09:40,110 So here's the HTML, 203 00:09:40,110 --> 00:09:43,980 this was generated by Angular CLI in the header folder, 204 00:09:43,980 --> 00:09:45,573 because it's the header component. 205 00:09:45,573 --> 00:09:50,573 Here is the HTML template for the header component, 206 00:09:51,000 --> 00:09:52,140 and it just says that. 207 00:09:52,140 --> 00:09:53,790 Obviously the idea was you could put something 208 00:09:53,790 --> 00:09:55,440 more interesting in here, 209 00:09:55,440 --> 00:09:59,403 but that was the HTML template that was generated for us. 210 00:10:00,330 --> 00:10:01,920 What about the StyleSheet? 211 00:10:01,920 --> 00:10:04,410 The StyleSheet, well it's empty at the moment, 212 00:10:04,410 --> 00:10:06,000 do you like my color scheme? 213 00:10:06,000 --> 00:10:09,060 I've got yellow for code, green for HTML, 214 00:10:09,060 --> 00:10:10,920 and pink for StyleSheets. 215 00:10:10,920 --> 00:10:14,700 So at the moment, my header CSS is empty, 216 00:10:14,700 --> 00:10:16,590 it doesn't need any particular styling. 217 00:10:16,590 --> 00:10:19,800 So, I mean to be honest in that case, why bother having it? 218 00:10:19,800 --> 00:10:22,770 So I'm gonna edit my code actually. 219 00:10:22,770 --> 00:10:24,930 I'm gonna go to my code for my header component, 220 00:10:24,930 --> 00:10:27,750 note this, there's a footer component as well, 221 00:10:27,750 --> 00:10:29,850 I'm gonna go into my header component 222 00:10:29,850 --> 00:10:32,733 and if this StyleSheet is empty, 223 00:10:33,750 --> 00:10:35,790 in fact what I'll do is I'll actually define, 224 00:10:35,790 --> 00:10:38,010 let's have a look at the HTML here. 225 00:10:38,010 --> 00:10:42,667 It says there's a paragraph "header works!", okay, 226 00:10:42,667 --> 00:10:47,667 "My uber cool header works!", it's a paragraph, 227 00:10:48,390 --> 00:10:52,020 I can define a style here just for my header component 228 00:10:52,020 --> 00:10:55,650 to say anywhere in that header component 229 00:10:55,650 --> 00:10:58,260 where there's a paragraph element, 230 00:10:58,260 --> 00:11:01,830 then set the background color- 231 00:11:01,830 --> 00:11:06,423 set the text color to be red, 232 00:11:07,889 --> 00:11:11,073 and set the background color to be green, 233 00:11:12,570 --> 00:11:16,091 and set the font size to be, well, 234 00:11:16,091 --> 00:11:19,740 if you want the font size to be twice the normal font size 235 00:11:19,740 --> 00:11:20,573 you can say 2em, 236 00:11:21,630 --> 00:11:24,630 and em is the standard size of the font, 237 00:11:24,630 --> 00:11:26,651 2em is twice the font size. 238 00:11:26,651 --> 00:11:29,850 Let's make it 5 times the font size 239 00:11:29,850 --> 00:11:31,830 so that it's very prominent, 240 00:11:31,830 --> 00:11:35,250 so this style, this set of styles here, 241 00:11:35,250 --> 00:11:37,293 will only apply to this component. 242 00:11:38,520 --> 00:11:41,512 Good, it's gonna be beautiful. 243 00:11:41,512 --> 00:11:44,472 Right, now then, here's there thing. 244 00:11:44,472 --> 00:11:46,980 There's this module in Angular, 245 00:11:46,980 --> 00:11:49,500 when an Angular application starts it needs to know 246 00:11:49,500 --> 00:11:51,930 about all the components in your application, 247 00:11:51,930 --> 00:11:55,500 and it's the module that tells it that information. 248 00:11:55,500 --> 00:11:58,300 So this is the module file, we haven't seen this before, 249 00:11:59,250 --> 00:12:02,730 in the src folder, there is one app.module at the moment, 250 00:12:02,730 --> 00:12:05,130 you can have multiple modules actually for modular design, 251 00:12:05,130 --> 00:12:07,410 but we have one module here, 252 00:12:07,410 --> 00:12:10,200 it's a class called AppModule. 253 00:12:10,200 --> 00:12:13,140 Not that that's particularly revelatory, 254 00:12:13,140 --> 00:12:17,460 the important thing here is the decorator that decorates it. 255 00:12:17,460 --> 00:12:20,883 This decorator is actually the important thing. 256 00:12:22,770 --> 00:12:25,380 The NgModule decorator, 257 00:12:25,380 --> 00:12:28,710 which I've just partially overwritten, excuse me, 258 00:12:28,710 --> 00:12:31,590 it specifies the declarations property here, 259 00:12:31,590 --> 00:12:33,810 this is an object syntax by the way, 260 00:12:33,810 --> 00:12:37,830 the declarations property lists all of the components 261 00:12:37,830 --> 00:12:39,360 in your application. 262 00:12:39,360 --> 00:12:42,300 The module needs to declare what components 263 00:12:42,300 --> 00:12:44,430 are part of your application. 264 00:12:44,430 --> 00:12:45,960 There are also some other details here 265 00:12:45,960 --> 00:12:47,310 that we need to get on to, 266 00:12:47,310 --> 00:12:50,103 the ability to run the application in a browser, 267 00:12:50,940 --> 00:12:53,190 providers is to do with service injection, 268 00:12:53,190 --> 00:12:55,350 we'll talk about that later, 269 00:12:55,350 --> 00:12:58,560 bootstrap, that's important, you can imagine 270 00:12:58,560 --> 00:13:03,150 in like when you have a C++ application, or C# or Java, 271 00:13:03,150 --> 00:13:06,180 when you run it one of the functions is the main function 272 00:13:06,180 --> 00:13:09,360 that gets executed, so it's obviously the main function. 273 00:13:09,360 --> 00:13:12,360 But in an Angular application you've got lots of components, 274 00:13:12,360 --> 00:13:14,910 and you have to basically tell Angular which component 275 00:13:14,910 --> 00:13:18,270 is the top level component that should be rendered first. 276 00:13:18,270 --> 00:13:20,670 That's what bootstrap means, it says of all these components 277 00:13:20,670 --> 00:13:24,480 you've got, what is the main component to run initially? 278 00:13:24,480 --> 00:13:27,093 AppComponent, that's the top level component. 279 00:13:27,960 --> 00:13:31,200 These components here have to be imported, 280 00:13:31,200 --> 00:13:34,650 import the app component from the src file, 281 00:13:34,650 --> 00:13:37,590 import the header component from the src file. 282 00:13:37,590 --> 00:13:40,140 Obviously if you didn't import these symbols 283 00:13:40,140 --> 00:13:41,700 you'd get compiler errors here, 284 00:13:41,700 --> 00:13:43,560 it wouldn't know what you're talking about. 285 00:13:43,560 --> 00:13:45,660 Now interestingly in my example, 286 00:13:45,660 --> 00:13:48,120 I've also got a footer component. 287 00:13:48,120 --> 00:13:49,443 So if you have a look, 288 00:13:50,460 --> 00:13:51,540 the footer component is, 289 00:13:51,540 --> 00:13:54,120 you know, the code is the same as the header basically, 290 00:13:54,120 --> 00:13:55,920 but have a look at the module. 291 00:13:55,920 --> 00:13:58,800 Remember, when I added my footer component 292 00:13:58,800 --> 00:14:03,750 Angular CLI automatically enhance my module specifier 293 00:14:03,750 --> 00:14:07,110 to include my footer, it did that automatically, 294 00:14:07,110 --> 00:14:09,720 okay so here's my AppModule class, 295 00:14:09,720 --> 00:14:11,160 that's not the important bit, 296 00:14:11,160 --> 00:14:14,700 the important bit here is the fact that it's decorated 297 00:14:14,700 --> 00:14:17,160 with this NgModule decorator. 298 00:14:17,160 --> 00:14:20,040 It declares an array of all the components 299 00:14:20,040 --> 00:14:21,723 including the footer component. 300 00:14:22,710 --> 00:14:24,630 Don't forget the import statement, 301 00:14:24,630 --> 00:14:26,910 otherwise it's not gonna like it. 302 00:14:26,910 --> 00:14:28,980 Okay, lets add that back in again. 303 00:14:28,980 --> 00:14:31,890 If you want to you can just tidy this code up a bit, 304 00:14:31,890 --> 00:14:33,750 because the application's quite simple, 305 00:14:33,750 --> 00:14:35,700 I've only got 3 components at the moment 306 00:14:35,700 --> 00:14:37,450 so I could just write it like that, 307 00:14:38,310 --> 00:14:41,070 and that might make it a bit easier to read. 308 00:14:41,070 --> 00:14:43,230 The imports list, you can run module 309 00:14:43,230 --> 00:14:44,880 can import other modules as well. 310 00:14:46,129 --> 00:14:48,210 So you might prefer that syntax, 311 00:14:48,210 --> 00:14:50,490 but as your application grows 312 00:14:50,490 --> 00:14:52,830 you're gonna have dozens of components, 313 00:14:52,830 --> 00:14:56,070 so it kinda makes more sense to list them like that, 314 00:14:56,070 --> 00:14:58,270 it's easier to read listing them vertically. 315 00:14:59,460 --> 00:15:01,710 Right, well anyway, that's the module. 316 00:15:01,710 --> 00:15:04,530 The module needs to know, or it needs to advertise 317 00:15:04,530 --> 00:15:07,230 all your components in your application. 318 00:15:07,230 --> 00:15:11,790 Right, so another closer look, just a reminder, 319 00:15:11,790 --> 00:15:15,480 in our header component each component has a selector, 320 00:15:15,480 --> 00:15:19,440 and that selector basically means use this as an XML tag 321 00:15:19,440 --> 00:15:22,860 to create an instance of this component. 322 00:15:22,860 --> 00:15:27,720 So the application component, when we our header component 323 00:15:27,720 --> 00:15:30,840 the Angular CLI automatically changed 324 00:15:30,840 --> 00:15:34,260 my application component, the top level component, 325 00:15:34,260 --> 00:15:35,850 like this. 326 00:15:35,850 --> 00:15:40,850 Basically in the app.component, the top level component 327 00:15:41,550 --> 00:15:44,490 you can use this syntax, app-header. 328 00:15:44,490 --> 00:15:48,090 It will basically- when this HTML template is rendered 329 00:15:48,090 --> 00:15:52,350 it will see this syntax and it will know that that tag name 330 00:15:52,350 --> 00:15:54,660 corresponds to this header component, 331 00:15:54,660 --> 00:15:57,720 so this tag here is basically like saying 332 00:15:57,720 --> 00:16:01,530 create a new instance of the header component and render it, 333 00:16:01,530 --> 00:16:03,240 it will create this object, 334 00:16:03,240 --> 00:16:05,790 generally this object will have data, 335 00:16:05,790 --> 00:16:09,540 and that data will be data-bound into the HTML 336 00:16:09,540 --> 00:16:12,137 and then displayed by the HTML. 337 00:16:12,137 --> 00:16:14,310 So an interesting thing would be 338 00:16:14,310 --> 00:16:17,190 what if I had more than 1 app-header? 339 00:16:17,190 --> 00:16:19,500 So if I go to my application component, 340 00:16:19,500 --> 00:16:21,273 here's my application component, 341 00:16:22,110 --> 00:16:24,090 we haven't seen this before, 342 00:16:24,090 --> 00:16:28,740 it's got some simple data plus its own template, 343 00:16:28,740 --> 00:16:30,990 its own HTML template, 344 00:16:30,990 --> 00:16:33,184 let's have a look at that file. 345 00:16:33,184 --> 00:16:36,420 In that file it says display the title, 346 00:16:36,420 --> 00:16:38,520 now this syntax here is data-binding, 347 00:16:38,520 --> 00:16:39,990 and we'll have a look at that later, 348 00:16:39,990 --> 00:16:43,200 it grabs that title from the corresponding component. 349 00:16:43,200 --> 00:16:46,140 If we're in app.component.html 350 00:16:46,140 --> 00:16:48,810 then it'll go to the corresponding component class, 351 00:16:48,810 --> 00:16:50,010 which is that one, 352 00:16:50,010 --> 00:16:53,160 and in there it will look for a data field called title. 353 00:16:53,160 --> 00:16:55,680 That's data-binding, it gets that data 354 00:16:55,680 --> 00:16:57,540 from the component class. 355 00:16:57,540 --> 00:17:02,070 So that title there is what's going to be displayed here. 356 00:17:02,070 --> 00:17:03,090 So what I'm going to do, 357 00:17:03,090 --> 00:17:06,690 I'm actually gonna change my component to say 358 00:17:06,690 --> 00:17:08,997 name = 'Andy', 359 00:17:10,761 --> 00:17:14,340 and we'll have nationality, I don't know if 360 00:17:14,340 --> 00:17:16,040 I've mentioned this but I'm Welsh. 361 00:17:16,890 --> 00:17:18,780 I think I might've dropped that into the conversation 362 00:17:18,780 --> 00:17:19,740 at some point. 363 00:17:19,740 --> 00:17:23,719 So I've changed my component to have some other data now, 364 00:17:23,719 --> 00:17:26,880 a name property and a nationality property, 365 00:17:26,880 --> 00:17:29,760 and I'm gonna go into my template to display it. 366 00:17:29,760 --> 00:17:32,760 Let's go to display name, 367 00:17:32,760 --> 00:17:34,177 it's gonna say this: 368 00:17:34,177 --> 00:17:36,957 "Hi name". 369 00:17:39,540 --> 00:17:41,887 Comma, very grammatically correct. 370 00:17:41,887 --> 00:17:46,887 "Your nationality is", and then here data-binding syntax. 371 00:17:48,090 --> 00:17:50,700 Open double curlies, closed double curlies, 372 00:17:50,700 --> 00:17:54,270 and inside here, a property from your component class. 373 00:17:54,270 --> 00:17:56,624 I called it nat, didn't I? 374 00:17:56,624 --> 00:17:59,310 You get IntelliSense as well, it's quite smart, 375 00:17:59,310 --> 00:18:01,140 I'm using Visual Studio Code. 376 00:18:01,140 --> 00:18:05,427 So that will say "Hi Andy, your nationality is Welsh." 377 00:18:07,525 --> 00:18:10,347 "Congratulations!" 378 00:18:12,150 --> 00:18:15,600 And then it's gonna run off my app-header component 379 00:18:15,600 --> 00:18:17,190 like that. 380 00:18:17,190 --> 00:18:18,600 So guess what we need to do now is to 381 00:18:18,600 --> 00:18:21,720 actually run the application, we need to do an ng serve. 382 00:18:21,720 --> 00:18:25,260 It will build the application, 383 00:18:25,260 --> 00:18:28,590 open up a development web server, 384 00:18:28,590 --> 00:18:32,190 and then you can browse to localhost:4200. 385 00:18:32,190 --> 00:18:35,520 Oh wow, that's beautiful! 386 00:18:35,520 --> 00:18:37,987 It said this is the application component, 387 00:18:37,987 --> 00:18:40,770 "Hi Andy, your nationality is Welsh, congratulations!" 388 00:18:40,770 --> 00:18:42,150 Nice one mate. 389 00:18:42,150 --> 00:18:43,980 And here's my header component, 390 00:18:43,980 --> 00:18:48,090 my header component had a StyleSheet, remember? 391 00:18:48,090 --> 00:18:50,280 So remember my header component. 392 00:18:50,280 --> 00:18:52,830 So first of all when it sees this, 393 00:18:52,830 --> 00:18:55,020 it will say right, I'll render the header component, 394 00:18:55,020 --> 00:18:58,214 it knows that that corresponds to the header component. 395 00:18:58,214 --> 00:18:59,910 The header component has that data, 396 00:18:59,910 --> 00:19:01,620 well no data actually, 397 00:19:01,620 --> 00:19:04,920 and it has that HTML "my uber cool header works" 398 00:19:04,920 --> 00:19:08,610 and also it applies that StyleSheet. 399 00:19:08,610 --> 00:19:10,530 Almost done here, question for you, 400 00:19:10,530 --> 00:19:15,530 what if in my top level HTML I have multiple headers, 401 00:19:15,990 --> 00:19:17,290 what happens if I do this? 402 00:19:19,890 --> 00:19:21,600 Well you know what's gonna happen, don't you? 403 00:19:21,600 --> 00:19:23,640 Basically every time you use that tag 404 00:19:23,640 --> 00:19:26,190 Angular will create a new instance of the header component 405 00:19:26,190 --> 00:19:27,360 and render it, 406 00:19:27,360 --> 00:19:31,290 so I'm gonna have the same output 3 times now. 407 00:19:31,290 --> 00:19:34,470 Oh good, and just so it doesn't feel left off, 408 00:19:34,470 --> 00:19:37,403 I had a footer component, remember? 409 00:19:37,403 --> 00:19:40,710 And the footer component, its selector was app-footer. 410 00:19:40,710 --> 00:19:42,360 I mean you can change that if you want, 411 00:19:42,360 --> 00:19:44,040 you just need to know what it is, 412 00:19:44,040 --> 00:19:46,050 that's the selector that we need to use 413 00:19:46,050 --> 00:19:47,370 to instantiate the footer. 414 00:19:47,370 --> 00:19:52,370 The footer was quite mundane, but at least it exists. 415 00:19:52,470 --> 00:19:55,050 So let me go back to my top level app component, 416 00:19:55,050 --> 00:19:58,323 and let's have, I know, let's have a horizontal rule, 417 00:19:59,640 --> 00:20:02,160 and then we have the app-footer. 418 00:20:02,160 --> 00:20:04,740 IntelliSense, it knows what components I've got, 419 00:20:04,740 --> 00:20:05,850 it's great isn't it? 420 00:20:05,850 --> 00:20:06,690 App-footer. 421 00:20:06,690 --> 00:20:08,760 I think we'll just have one app-footer 422 00:20:08,760 --> 00:20:10,113 because it's a bit boring. 423 00:20:11,430 --> 00:20:14,040 Save the file, when you do an ng serve 424 00:20:14,040 --> 00:20:15,930 it has a live connection to your code, 425 00:20:15,930 --> 00:20:18,660 so as soon as you save the file it will rebuild it 426 00:20:18,660 --> 00:20:19,613 and then redisplay it. 427 00:20:20,490 --> 00:20:22,800 Okay, so there we go, so that's done. 428 00:20:22,800 --> 00:20:24,960 So my header picked up some data, 429 00:20:24,960 --> 00:20:26,280 my application component, 430 00:20:26,280 --> 00:20:29,070 here's my header instantiated 3 times, 431 00:20:29,070 --> 00:20:31,020 and my footer at the bottom. 432 00:20:31,020 --> 00:20:32,910 So now you've got a good understanding 433 00:20:32,910 --> 00:20:34,320 of how components work, 434 00:20:34,320 --> 00:20:35,790 I think now we're ready to start looking 435 00:20:35,790 --> 00:20:36,813 at how to test them.