1 00:00:00,920 --> 00:00:01,910 Hello again, everyone. 2 00:00:03,090 --> 00:00:09,680 So in the last lesson, huh, we got through a lot of information about components. 3 00:00:10,650 --> 00:00:16,330 We created a new component manually and we learned how to add this component into our project. 4 00:00:16,890 --> 00:00:24,450 So in this lesson, we're going to get it into, oh, how to add a component automatically with Kellye. 5 00:00:26,850 --> 00:00:36,090 So for this, I'll open up a new terminal page and here I'll type in the command and generate component. 6 00:00:44,030 --> 00:00:50,000 And then already the name of the new component that we're going to add, in fact, we can only do this 7 00:00:50,000 --> 00:00:52,520 by writing the initials of these words. 8 00:00:53,920 --> 00:00:58,660 So I'm typing the Engy G.S. command press at her. 9 00:01:01,040 --> 00:01:04,310 And the component gets created with this command. 10 00:01:05,520 --> 00:01:13,500 And look, a new folder has been added, and it has CSC as HTML spec A.S. files. 11 00:01:15,090 --> 00:01:20,400 So I'm deleting this backfire here for now, because this file is used in the testing phase, so we 12 00:01:20,400 --> 00:01:21,570 don't need to think about it. 13 00:01:22,660 --> 00:01:24,190 So we're not going to need this now. 14 00:01:25,960 --> 00:01:32,860 However, you see here, this is the products component that we created our last lesson, and here is 15 00:01:32,860 --> 00:01:35,200 the product component that we just created. 16 00:01:36,470 --> 00:01:39,710 So open the HTML page of this newly created component. 17 00:01:40,820 --> 00:01:46,250 And look how it's written by default, so I can delete these. 18 00:01:47,210 --> 00:01:51,470 And I'm writing all this to indicate that this is from this component. 19 00:01:55,410 --> 00:02:02,380 And now I can open the TSA file and as we remember, there was a selector here. 20 00:02:03,590 --> 00:02:09,290 And it's thanks to The Selecter that we can use this component and our other components. 21 00:02:10,590 --> 00:02:12,200 So we can ignore them for now. 22 00:02:13,950 --> 00:02:15,990 But the selectors defined like that. 23 00:02:17,510 --> 00:02:22,670 So there's no app statement at the beginning of the component that we created in the last lesson. 24 00:02:25,990 --> 00:02:32,740 So to make a clearer order, we can either delete the expression here or bring app in front of the other 25 00:02:32,740 --> 00:02:33,850 component selector. 26 00:02:38,760 --> 00:02:40,370 But I just want to read it for now. 27 00:02:41,660 --> 00:02:46,280 Now, there's one more step left to introduce this component to Angular. 28 00:02:47,180 --> 00:02:53,720 And that is including this component in the app, that module that he has file. 29 00:02:55,010 --> 00:02:59,000 So now when we look at this fire, we see that the component is added automatically. 30 00:03:00,460 --> 00:03:06,550 And as you can see, we have now quickly created our component with the Energy G.S. Command. 31 00:03:09,640 --> 00:03:13,300 So now I want to call this component and the products component. 32 00:03:14,250 --> 00:03:17,110 Because we create a list of products, right? 33 00:03:17,130 --> 00:03:18,150 So in other words, we. 34 00:03:23,790 --> 00:03:28,560 Call the products component first and then the product component twice. 35 00:03:32,360 --> 00:03:35,240 And then when I say the changes, as you can see in the browser. 36 00:03:38,350 --> 00:03:42,190 We see different component information on a single page. 37 00:03:45,530 --> 00:03:51,680 First active component, then products component and then product component twice. 38 00:03:54,190 --> 00:03:56,650 And we see this by saying inspect. 39 00:03:59,830 --> 00:04:00,610 So see here. 40 00:04:01,670 --> 00:04:04,070 We can see which component the information comes from. 41 00:04:10,650 --> 00:04:16,680 Now, also, you can tell that I didn't make any changes in the Abda component, that HTML page, but 42 00:04:16,680 --> 00:04:19,770 here we have already used the products component. 43 00:04:23,930 --> 00:04:28,460 So in this lesson, we called the product component in products component. 44 00:04:29,400 --> 00:04:37,110 And so our component products component and product were added to our component page in that order. 45 00:04:38,220 --> 00:04:43,020 So that's called using nested components. 46 00:04:44,330 --> 00:04:45,070 Pretty cool, huh?