In this lecture, we're going to learn how to create a component.
Up until now, we've been working on a single component.
It's recommended we break an application into several components, as we discussed before.
Components are a feature for teaching the browser new CMLL tags.
Therefore, components can be structured like a tree.
It's similar to the Dom Tree.
The app component is typically the root or parent component of all components.
The job of the app component is to load other components in this diagram.
We have a hierarchy of components where the app component is the parent.
The product components are the children of the app component.
Children components can load more components.
There isn't a limit on the depth of the tree.
It's similar to HTML, or we can have a deeply nested structure of HTML tags.
Typically, components should focus on one feature.
In our example, the product component would never render information about users.
It should focus strictly on products throughout this course.
You'll get a feeling for how components should be structured.
We have two options for creating components.
We can create them manually or use these seelye.
We've already seen how to create components manually.
I think this would be a great opportunity to learn how to use these seelye to help us generate a components
files.
It will save us the trouble of manually creating and configuring a component.
We can create a component with the engine, generate component command and the command line.
We have the app running.
We can open a new command line by pressing the Plus button.
I recommend having two command lines open for the rest of this course.
One for running the server.
Another for installing packages or creating files.
We can switch between command lines through the dropdown.
Alternatively, you can drag the command line to the top of the editor to create a new tab.
I find this feature incredibly helpful for saving space in the editor.
Another cool feature is being able to rename a tab.
We can right click on a tab to select the rename option.
I'm going to assign custom names to both terminals.
Inside the new command line, we're going to write the energy generate component command with the help
option.
It's always good practice to check out what our options are for a new command.
The description will tell us this command will create a new component.
The arguments for the command are the name and schematic a schematic as a set of instructions for creating
a set of files.
In this case, the schematic will be for generating components.
The name argument is the name of our components inside the command line.
We will run the following command energy generate component post.
After a few moments, the Clia will give us a list of files that were created or updated inside these
source slash app directory.
We have a new folder called Post Components should be placed inside a separate directory.
It's a common practice we adopt angular will generate a class template, style sheet and test file.
The style sheet and template will be very basic.
There's nothing interesting happening in these files.
As for the test file, we're going to ignore it.
Testing is not a topic covered in this course.
Let's check out the class file.
Right away, we're going to be greeted with an entirely different starter file from the app components
with a single command.
They see a line generated this entire file for us.
It has the same settings as the app component, with some exceptions.
Firstly, the class has a constructor function and nji on in its method.
The constructor function is commonly used for initializing properties for this demonstration.
We're going to remove it from the class.
It's not a function will be using.
As for the N.G. on init method, we're going to remove it to as well as the implements key word and
on init object from the import statement.
I want to start with a minimal component.
These extra pieces of code will be revisited in a future lecture.
Other than that, everything in this file should be familiar to you.
Typically, we would need to register to be component.
Luckily, we won't have to.
The Seelye has done so for us.
Let's check out the app module file.
The file has been updated to register the component for us at the top.
The component is being imported into the module inside the Declaration Options.
The component has been added to the array, which is awesome.
In the next lecture, we're going to use our component for displaying the image.