1 00:00:00,270 --> 00:00:04,140 In this lecture, we're going to learn how to create a component. 2 00:00:04,410 --> 00:00:07,830 Up until now, we've been working on a single component. 3 00:00:08,130 --> 00:00:14,070 It's recommended we break an application into several components, as we discussed before. 4 00:00:14,100 --> 00:00:18,720 Components are a feature for teaching the browser new CMLL tags. 5 00:00:18,960 --> 00:00:22,110 Therefore, components can be structured like a tree. 6 00:00:22,380 --> 00:00:24,300 It's similar to the Dom Tree. 7 00:00:24,960 --> 00:00:30,000 The app component is typically the root or parent component of all components. 8 00:00:30,330 --> 00:00:35,590 The job of the app component is to load other components in this diagram. 9 00:00:35,610 --> 00:00:40,110 We have a hierarchy of components where the app component is the parent. 10 00:00:40,560 --> 00:00:44,100 The product components are the children of the app component. 11 00:00:44,700 --> 00:00:47,490 Children components can load more components. 12 00:00:47,790 --> 00:00:50,190 There isn't a limit on the depth of the tree. 13 00:00:50,580 --> 00:00:56,550 It's similar to HTML, or we can have a deeply nested structure of HTML tags. 14 00:00:56,790 --> 00:01:00,210 Typically, components should focus on one feature. 15 00:01:00,510 --> 00:01:05,880 In our example, the product component would never render information about users. 16 00:01:06,180 --> 00:01:10,020 It should focus strictly on products throughout this course. 17 00:01:10,230 --> 00:01:13,290 You'll get a feeling for how components should be structured. 18 00:01:14,350 --> 00:01:17,360 We have two options for creating components. 19 00:01:17,590 --> 00:01:21,040 We can create them manually or use these seelye. 20 00:01:21,370 --> 00:01:24,640 We've already seen how to create components manually. 21 00:01:24,940 --> 00:01:31,420 I think this would be a great opportunity to learn how to use these seelye to help us generate a components 22 00:01:31,420 --> 00:01:32,110 files. 23 00:01:32,440 --> 00:01:37,220 It will save us the trouble of manually creating and configuring a component. 24 00:01:37,900 --> 00:01:44,200 We can create a component with the engine, generate component command and the command line. 25 00:01:44,230 --> 00:01:45,670 We have the app running. 26 00:01:45,940 --> 00:01:49,570 We can open a new command line by pressing the Plus button. 27 00:01:49,930 --> 00:01:54,310 I recommend having two command lines open for the rest of this course. 28 00:01:54,640 --> 00:01:56,140 One for running the server. 29 00:01:56,380 --> 00:01:59,890 Another for installing packages or creating files. 30 00:02:00,190 --> 00:02:03,670 We can switch between command lines through the dropdown. 31 00:02:06,310 --> 00:02:12,340 Alternatively, you can drag the command line to the top of the editor to create a new tab. 32 00:02:12,760 --> 00:02:17,230 I find this feature incredibly helpful for saving space in the editor. 33 00:02:17,590 --> 00:02:21,160 Another cool feature is being able to rename a tab. 34 00:02:21,520 --> 00:02:25,510 We can right click on a tab to select the rename option. 35 00:02:25,930 --> 00:02:29,440 I'm going to assign custom names to both terminals. 36 00:02:34,660 --> 00:02:41,200 Inside the new command line, we're going to write the energy generate component command with the help 37 00:02:41,200 --> 00:02:41,770 option. 38 00:02:44,360 --> 00:02:48,830 It's always good practice to check out what our options are for a new command. 39 00:02:49,130 --> 00:02:53,170 The description will tell us this command will create a new component. 40 00:02:53,480 --> 00:03:00,800 The arguments for the command are the name and schematic a schematic as a set of instructions for creating 41 00:03:00,800 --> 00:03:01,970 a set of files. 42 00:03:02,240 --> 00:03:06,200 In this case, the schematic will be for generating components. 43 00:03:06,560 --> 00:03:12,150 The name argument is the name of our components inside the command line. 44 00:03:12,170 --> 00:03:17,480 We will run the following command energy generate component post. 45 00:03:20,030 --> 00:03:27,170 After a few moments, the Clia will give us a list of files that were created or updated inside these 46 00:03:27,170 --> 00:03:29,600 source slash app directory. 47 00:03:29,780 --> 00:03:35,930 We have a new folder called Post Components should be placed inside a separate directory. 48 00:03:36,230 --> 00:03:43,730 It's a common practice we adopt angular will generate a class template, style sheet and test file. 49 00:03:44,300 --> 00:03:47,210 The style sheet and template will be very basic. 50 00:03:47,480 --> 00:03:50,100 There's nothing interesting happening in these files. 51 00:03:50,360 --> 00:03:53,540 As for the test file, we're going to ignore it. 52 00:03:53,840 --> 00:03:56,630 Testing is not a topic covered in this course. 53 00:03:56,930 --> 00:03:59,030 Let's check out the class file. 54 00:04:01,760 --> 00:04:07,730 Right away, we're going to be greeted with an entirely different starter file from the app components 55 00:04:08,060 --> 00:04:09,440 with a single command. 56 00:04:09,650 --> 00:04:13,010 They see a line generated this entire file for us. 57 00:04:13,340 --> 00:04:17,630 It has the same settings as the app component, with some exceptions. 58 00:04:18,110 --> 00:04:23,690 Firstly, the class has a constructor function and nji on in its method. 59 00:04:24,050 --> 00:04:29,960 The constructor function is commonly used for initializing properties for this demonstration. 60 00:04:30,080 --> 00:04:32,150 We're going to remove it from the class. 61 00:04:32,420 --> 00:04:34,250 It's not a function will be using. 62 00:04:34,910 --> 00:04:42,050 As for the N.G. on init method, we're going to remove it to as well as the implements key word and 63 00:04:42,050 --> 00:04:45,140 on init object from the import statement. 64 00:04:47,670 --> 00:04:50,040 I want to start with a minimal component. 65 00:04:50,340 --> 00:04:54,270 These extra pieces of code will be revisited in a future lecture. 66 00:04:54,510 --> 00:04:58,230 Other than that, everything in this file should be familiar to you. 67 00:04:58,470 --> 00:05:01,530 Typically, we would need to register to be component. 68 00:05:01,800 --> 00:05:03,690 Luckily, we won't have to. 69 00:05:03,990 --> 00:05:06,180 The Seelye has done so for us. 70 00:05:06,420 --> 00:05:08,790 Let's check out the app module file. 71 00:05:11,310 --> 00:05:15,870 The file has been updated to register the component for us at the top. 72 00:05:16,110 --> 00:05:21,870 The component is being imported into the module inside the Declaration Options. 73 00:05:22,050 --> 00:05:25,530 The component has been added to the array, which is awesome. 74 00:05:25,860 --> 00:05:30,750 In the next lecture, we're going to use our component for displaying the image.