Hello again, everyone.
So in the last lesson, huh, we got through a lot of information about components.
We created a new component manually and we learned how to add this component into our project.
So in this lesson, we're going to get it into, oh, how to add a component automatically with Kellye.
So for this, I'll open up a new terminal page and here I'll type in the command and generate component.
And then already the name of the new component that we're going to add, in fact, we can only do this
by writing the initials of these words.
So I'm typing the Engy G.S. command press at her.
And the component gets created with this command.
And look, a new folder has been added, and it has CSC as HTML spec A.S. files.
So I'm deleting this backfire here for now, because this file is used in the testing phase, so we
don't need to think about it.
So we're not going to need this now.
However, you see here, this is the products component that we created our last lesson, and here is
the product component that we just created.
So open the HTML page of this newly created component.
And look how it's written by default, so I can delete these.
And I'm writing all this to indicate that this is from this component.
And now I can open the TSA file and as we remember, there was a selector here.
And it's thanks to The Selecter that we can use this component and our other components.
So we can ignore them for now.
But the selectors defined like that.
So there's no app statement at the beginning of the component that we created in the last lesson.
So to make a clearer order, we can either delete the expression here or bring app in front of the other
component selector.
But I just want to read it for now.
Now, there's one more step left to introduce this component to Angular.
And that is including this component in the app, that module that he has file.
So now when we look at this fire, we see that the component is added automatically.
And as you can see, we have now quickly created our component with the Energy G.S. Command.
So now I want to call this component and the products component.
Because we create a list of products, right?
So in other words, we.
Call the products component first and then the product component twice.
And then when I say the changes, as you can see in the browser.
We see different component information on a single page.
First active component, then products component and then product component twice.
And we see this by saying inspect.
So see here.
We can see which component the information comes from.
Now, also, you can tell that I didn't make any changes in the Abda component, that HTML page, but
here we have already used the products component.
So in this lesson, we called the product component in products component.
And so our component products component and product were added to our component page in that order.
So that's called using nested components.
Pretty cool, huh?