1 00:00:03,650 --> 00:00:09,520 A typical Angular application consists of many components. 2 00:00:09,520 --> 00:00:16,225 Components control a part of the screen called as a view in Angular. 3 00:00:16,225 --> 00:00:21,840 So, when you create your screen on your Angular application, 4 00:00:21,840 --> 00:00:25,310 you may divide your screen into multiple views, 5 00:00:25,310 --> 00:00:29,384 each one of them being controlled by a separate component. 6 00:00:29,384 --> 00:00:31,200 So far, in the example, 7 00:00:31,200 --> 00:00:35,715 we have one single root component that controls the entire screen. 8 00:00:35,715 --> 00:00:42,440 In this lesson, we will add in one more component that takes part of the screen and takes 9 00:00:42,440 --> 00:00:45,890 control of that part of the screen and takes care of 10 00:00:45,890 --> 00:00:50,275 the entire rendering of that part of the screen, here. 11 00:00:50,275 --> 00:00:54,060 Let's pay a quick visit to the App component that 12 00:00:54,060 --> 00:00:57,350 we already have as part of our Angular application. 13 00:00:57,350 --> 00:00:58,730 So, in this component, 14 00:00:58,730 --> 00:01:04,250 you can see that we are importing the component from Angular core. 15 00:01:04,250 --> 00:01:07,100 So, this provides us with the ability to 16 00:01:07,100 --> 00:01:11,585 define a component decorator and apply it to our class. 17 00:01:11,585 --> 00:01:16,640 So, this will define one component that forms part of our Angular application. 18 00:01:16,640 --> 00:01:19,590 So, in here, this particular component, 19 00:01:19,590 --> 00:01:22,970 as you can see, when you define the component decorator, 20 00:01:22,970 --> 00:01:30,450 it consists of several properties here one of them being the selector, here. 21 00:01:30,450 --> 00:01:36,375 Now, this particular selector property defines a string here. 22 00:01:36,375 --> 00:01:40,010 Note, in particular, what is contained inside the string. 23 00:01:40,010 --> 00:01:42,080 It says app-root. 24 00:01:42,080 --> 00:01:46,270 Now, looking back at index.html file. 25 00:01:46,270 --> 00:01:48,915 So, I'm going to index.html file. 26 00:01:48,915 --> 00:01:51,400 You can see that right there, 27 00:01:51,400 --> 00:02:00,570 we are using this app-root as one of the tags in our index.html file. 28 00:02:00,570 --> 00:02:05,630 So, now you see that this particular tag that you're using refers 29 00:02:05,630 --> 00:02:11,270 to the selector of what we have specified here, app-root. 30 00:02:11,270 --> 00:02:18,500 So, if you want to give a part of the screen and make that controllable by a component, 31 00:02:18,500 --> 00:02:23,135 then you use the selector to specify and then you'll include 32 00:02:23,135 --> 00:02:28,310 the selector tag into your HTML file. 33 00:02:28,310 --> 00:02:32,190 Same thing applies also to the template of a component. 34 00:02:32,190 --> 00:02:35,330 If you include another selector from another component 35 00:02:35,330 --> 00:02:39,350 into the template of this component, 36 00:02:39,350 --> 00:02:42,770 then that part of the screen will be handed over to 37 00:02:42,770 --> 00:02:46,440 the second component to be controlled from the second component. 38 00:02:46,440 --> 00:02:52,304 We will also learn about that in one of the later lessons. 39 00:02:52,304 --> 00:02:57,970 Now, the second part that you see being specified is templateUrl. 40 00:02:57,970 --> 00:03:06,560 This templateUrl specifies the name of the template file for this particular component. 41 00:03:06,560 --> 00:03:10,970 So, in this case, as you can see, this is app.component.html. 42 00:03:10,970 --> 00:03:14,720 So, that's the reason why the template is being defined in the 43 00:03:14,720 --> 00:03:19,605 app.component.html file for this particular component. 44 00:03:19,605 --> 00:03:25,270 In addition, you can also supply styles for this application. 45 00:03:25,270 --> 00:03:30,105 So, here we are saying styleUrls and then in here, 46 00:03:30,105 --> 00:03:36,610 within square brackets you are supplying this saying./app.component.scss. 47 00:03:36,610 --> 00:03:44,175 So, which means that this particular SaaS file is applied to this style. 48 00:03:44,175 --> 00:03:48,620 So as you saw when we created our Angular application, 49 00:03:48,620 --> 00:03:53,970 I specified to the style format that I'm going use is a SCSS. 50 00:03:53,970 --> 00:03:56,650 So, that's the reason why these files are SCSS. 51 00:03:56,650 --> 00:04:01,190 If you do not use the style SCSS and instead create normally, 52 00:04:01,190 --> 00:04:06,860 then these would be just CSS files and then you can use CSS to define 53 00:04:06,860 --> 00:04:16,020 the styles that can be used in your application templates or in your component templates. 54 00:04:16,020 --> 00:04:19,820 So, if you have any component specific 55 00:04:19,820 --> 00:04:23,000 styles that you want to include for this particular component, 56 00:04:23,000 --> 00:04:25,565 then you will include them in this file. 57 00:04:25,565 --> 00:04:29,965 You can also specify the template and the style inline. 58 00:04:29,965 --> 00:04:33,280 So, if you specify the style or the template inline, 59 00:04:33,280 --> 00:04:37,785 you would simply specify that as with back quotes. 60 00:04:37,785 --> 00:04:40,080 So, for example, I can simply, 61 00:04:40,080 --> 00:04:42,520 instead of doing the templateUrl, 62 00:04:42,520 --> 00:04:47,180 I can simply edit this to template and 63 00:04:47,180 --> 00:04:52,475 then I will define the template within back quotes here. 64 00:04:52,475 --> 00:04:59,420 So I would say and within back qootes I can even do templates like this. 65 00:04:59,420 --> 00:05:07,360 So, I can say h1 and then title. 66 00:05:07,360 --> 00:05:17,060 So, this would be what we call as inline template that we use within our application. 67 00:05:17,060 --> 00:05:19,280 Now, if you use back quotes, 68 00:05:19,280 --> 00:05:23,690 you can also use things like dollar add on in 69 00:05:23,690 --> 00:05:28,955 order to use variables within your templates and so on. 70 00:05:28,955 --> 00:05:31,235 In this particular course, 71 00:05:31,235 --> 00:05:34,820 we're going to use separate template files 72 00:05:34,820 --> 00:05:39,590 and create the templates in those HTML files instead. 73 00:05:39,590 --> 00:05:45,050 I prefer that method of defining my templates rather than doing inline templates. 74 00:05:45,050 --> 00:05:49,180 But if your template is very simple and contains just two or three lines, 75 00:05:49,180 --> 00:05:56,235 then by all means use a inline template like this within your application. 76 00:05:56,235 --> 00:06:02,930 So, let me change it back to my original value here. 77 00:06:02,930 --> 00:06:04,770 Same thing for styles. 78 00:06:04,770 --> 00:06:08,240 Also, I can simply say styles and then within back quotes 79 00:06:08,240 --> 00:06:12,500 include my CSS classes within the back quotes. 80 00:06:12,500 --> 00:06:15,245 Although as as I mentioned, 81 00:06:15,245 --> 00:06:24,895 I prefer to keep them in separate files just for having clean code in my.ts files here. 82 00:06:24,895 --> 00:06:27,515 So we have selector template styles. 83 00:06:27,515 --> 00:06:30,010 We will also have another one called module ID. 84 00:06:30,010 --> 00:06:33,020 At the moment I'm not using that for my component, 85 00:06:33,020 --> 00:06:40,395 but in some cases you will need to specify the module ID explicitly for your component. 86 00:06:40,395 --> 00:06:44,610 We'll see some examples of that a little bit later. 87 00:06:44,610 --> 00:06:50,955 Now in addition, a component is nothing but a JavaScript class or a Type Script class. 88 00:06:50,955 --> 00:06:53,615 So that's why you see here, 89 00:06:53,615 --> 00:06:58,960 defining a class saying AppComponent and then you are exporting this class. 90 00:06:58,960 --> 00:07:01,820 The reason why we use the export here, 91 00:07:01,820 --> 00:07:06,820 so that this component can be imported into my app module. 92 00:07:06,820 --> 00:07:10,070 So you saw that we were importing this into my app module. 93 00:07:10,070 --> 00:07:18,350 So whenever you want to make any component or a module in portable in another module, 94 00:07:18,350 --> 00:07:25,245 then you would always prepend the export to the class here. 95 00:07:25,245 --> 00:07:28,040 So, in addition, also, 96 00:07:28,040 --> 00:07:34,295 we see that we have some local properties that we defined 97 00:07:34,295 --> 00:07:43,220 inside our classes here and these would be accessible through to my template. 98 00:07:43,220 --> 00:07:45,340 So I can make use of these in my template. 99 00:07:45,340 --> 00:07:48,170 So the properties that are defined inside my 100 00:07:48,170 --> 00:07:53,230 component.ts file are accessible from my template files. 101 00:07:53,230 --> 00:08:00,875 We'll talk about the data binding aspector a little bit later in another lesson. 102 00:08:00,875 --> 00:08:08,075 To summarize, what we have learned so far is that a component is defined by 103 00:08:08,075 --> 00:08:15,990 specifying the code and also specifying the corresponding template. 104 00:08:15,990 --> 00:08:19,850 So, inside the code you can define properties and methods 105 00:08:19,850 --> 00:08:24,455 that will be accessible from your template from the corresponding template. 106 00:08:24,455 --> 00:08:26,530 So, as you saw, in the metadata, 107 00:08:26,530 --> 00:08:29,370 in the decorator, in the component decorator, 108 00:08:29,370 --> 00:08:33,425 you specified the template file name as one 109 00:08:33,425 --> 00:08:38,380 of the properties for your component class here. 110 00:08:38,380 --> 00:08:41,870 Similarly, any properties and methods that you define in 111 00:08:41,870 --> 00:08:45,875 your component will be accessible from your template. 112 00:08:45,875 --> 00:08:49,645 Not only that, you can also have what is called as event 113 00:08:49,645 --> 00:08:53,450 binding from your template back to your components. 114 00:08:53,450 --> 00:08:57,320 So, if any events are generated in your templates, so for example, 115 00:08:57,320 --> 00:09:02,180 clicking of a button on your template that can trigger 116 00:09:02,180 --> 00:09:08,535 calls to methods inside your code here, 117 00:09:08,535 --> 00:09:11,400 the Javascript or the Type Script code here. 118 00:09:11,400 --> 00:09:16,790 We will see the use of those in one of the later lessons and then there, I will, again, 119 00:09:16,790 --> 00:09:20,180 revisit this point about property binding and event binding, 120 00:09:20,180 --> 00:09:23,500 and explain this to you in a bit more detail. 121 00:09:23,500 --> 00:09:29,840 The components in an Angular application can themselves be organized into a hierarchy. 122 00:09:29,840 --> 00:09:32,470 So, you will always have a root component. 123 00:09:32,470 --> 00:09:33,835 So for our application, 124 00:09:33,835 --> 00:09:37,130 the app.component.ts file and 125 00:09:37,130 --> 00:09:43,039 the corresponding HTML template forms the root component for our application 126 00:09:43,039 --> 00:09:46,724 and this root component can then contain 127 00:09:46,724 --> 00:09:52,825 components down in a hierarchy and can include components in the hierarchy. 128 00:09:52,825 --> 00:09:56,750 We will see that in the very next exercise, 129 00:09:56,750 --> 00:10:02,275 where we will create another component and then use that in our root component. 130 00:10:02,275 --> 00:10:04,960 So, you can have multiple components being 131 00:10:04,960 --> 00:10:08,005 included into your root component and these components 132 00:10:08,005 --> 00:10:13,690 themselves in turn can use other components that are included inside them. 133 00:10:13,690 --> 00:10:21,075 So, this hierarchy of components is what enables you to design your application's screen. 134 00:10:21,075 --> 00:10:24,940 With this quick understanding of components 135 00:10:24,940 --> 00:10:28,810 and how components are useful for designing our application, 136 00:10:28,810 --> 00:10:32,935 we'll now go on to our next exercise where we will create 137 00:10:32,935 --> 00:10:37,339 and add another component to our Angular application 138 00:10:37,339 --> 00:10:41,810 and then we will define a template for that component and then we will make use of 139 00:10:41,810 --> 00:10:47,230 that component inside our root component to design our screen.