1 00:00:00,500 --> 00:00:01,440 Hello again, everyone. 2 00:00:02,360 --> 00:00:08,800 So we created the general scheme that will enable data transmission the last time. 3 00:00:09,350 --> 00:00:14,060 So in this lesson, we're going to create a component structure that we're going to use for this particular 4 00:00:14,060 --> 00:00:14,600 project. 5 00:00:16,330 --> 00:00:18,190 Now we've learned to create components. 6 00:00:19,150 --> 00:00:22,780 Now we can build a component via Seelie. 7 00:00:24,370 --> 00:00:32,920 But let's review how we created to create our component under the app module, so we're all just right 8 00:00:32,920 --> 00:00:37,150 click and create a new component to yes file. 9 00:00:38,160 --> 00:00:42,990 And first, we will create our class and of course, there will be an export at the beginning. 10 00:00:44,390 --> 00:00:49,400 And then we create our class and there will be an export at the beginning. 11 00:00:53,810 --> 00:00:58,040 And of course, we will then import this from angular core. 12 00:01:05,060 --> 00:01:09,740 And some important information that we use and the decorator. 13 00:01:12,530 --> 00:01:14,720 The first of these is Selecter. 14 00:01:15,800 --> 00:01:21,950 And as you may remember, the expression that we specify how to call The Selecter when using this component 15 00:01:21,950 --> 00:01:22,640 outside. 16 00:01:24,520 --> 00:01:27,340 Now, here we can use an American style page. 17 00:01:30,610 --> 00:01:34,810 For this, I will create our component HD and six files. 18 00:01:41,810 --> 00:01:47,480 Then we're going to fill in the template, you, Earl in style, you Earl sections in this decorator. 19 00:01:53,060 --> 00:01:58,670 So let me just remind you that the style you earles here express an array. 20 00:02:00,420 --> 00:02:03,150 So that means we use square brackets for this. 21 00:02:04,640 --> 00:02:08,930 And if we want to, we can use more than one style page here. 22 00:02:10,090 --> 00:02:11,410 One is enough for now. 23 00:02:13,380 --> 00:02:21,570 And now I want to use the model in which we created methods for this class, so I'm creating one model 24 00:02:22,170 --> 00:02:25,260 and this is the example of the class with methods. 25 00:02:26,710 --> 00:02:31,280 And now we can easily access the methods that we will create through this model. 26 00:02:33,230 --> 00:02:36,380 All right, so that's the first stage of the component complete. 27 00:02:38,020 --> 00:02:42,080 Now we need to add the components that we created in that module. 28 00:02:42,490 --> 00:02:43,180 Yes. 29 00:02:44,430 --> 00:02:49,650 And actually, we used new components with components before, if you recall. 30 00:02:50,810 --> 00:02:54,920 But this time, I want to only use the components that we've just created. 31 00:03:04,700 --> 00:03:06,950 That's why I'm deleting app components. 32 00:03:08,850 --> 00:03:15,960 All right, so we're going to add our own components, so add our component in declarations. 33 00:03:17,450 --> 00:03:20,570 And automatically the component is imported. 34 00:03:21,990 --> 00:03:28,850 A sense we want this component to run when starting the project will add the component into the bootstrap. 35 00:03:35,260 --> 00:03:40,880 Now, when we were on the project, see if it works correctly, add something to the HTML file. 36 00:03:41,460 --> 00:03:42,060 So right. 37 00:03:42,330 --> 00:03:44,250 This is a book component here. 38 00:03:51,250 --> 00:03:55,000 And I will expect to see this when I run the project. 39 00:03:56,950 --> 00:04:03,220 All right, so now we've got one more place to fix, so if you recall, there was an app route, part 40 00:04:03,350 --> 00:04:05,020 index, HTML. 41 00:04:07,470 --> 00:04:09,750 And this is from the selector in the component. 42 00:04:11,590 --> 00:04:15,690 So here we need to organize just a little bit better. 43 00:04:16,590 --> 00:04:19,740 All right, so we're going to specify which component will run. 44 00:04:21,840 --> 00:04:23,370 So just fix it here and. 45 00:04:24,930 --> 00:04:25,380 Cool. 46 00:04:25,410 --> 00:04:34,580 So let's summarize this, so when you look in the main Dotts file, Yapp module will run, all right, 47 00:04:34,590 --> 00:04:35,420 that's not a problem. 48 00:04:35,430 --> 00:04:38,490 We've already completed the components in the app module. 49 00:04:39,540 --> 00:04:47,310 Then we made the component definitions that we've created in the module text file and in bootstrap. 50 00:04:47,310 --> 00:04:51,570 We specify the component that will be launched when the project is run. 51 00:04:52,550 --> 00:04:59,030 And we made selecter template and style definitions in the components file. 52 00:04:59,940 --> 00:05:06,590 We wrote the schema that will be seen when we run our project in the HTML file. 53 00:05:07,560 --> 00:05:12,360 And on the index HTML page, we specify The Selecter. 54 00:05:13,670 --> 00:05:20,260 So when the project runs, its component knows that it's going to run, so it looks pretty good to me. 55 00:05:20,300 --> 00:05:21,830 Let's run it and see. 56 00:05:23,220 --> 00:05:27,930 And here we see the e-mail content that we have created right here in the browser. 57 00:05:29,330 --> 00:05:31,850 And we will continue our edits on this page. 58 00:05:33,420 --> 00:05:41,350 All right, my friends, we have made the necessary component definitions that we're going to be using. 59 00:05:41,910 --> 00:05:43,320 So I want to see in the next lesson.