Hello, everyone, again, so the last lesson we talked about the importance of components over app
components, right?
And this is the basic component for anger, so will our project only be a component?
Well, of course not.
We can add different functionality to our project by creating new components and to do this well, we're
now going to learn how to add components to our project.
So, as I say, we're preparing a page where company's products live and we want to create a list of
these products and some descriptive information about some of the products.
So now I'm going to create a new folder under the Yapp folder to proceed properly and cleanly.
Now, since this folder is related to products, I am making the folder name products and I'll create
the folder under the folder because usually angular related applications are stored underneath this
folder.
So now we're going to create a new file under this folder and I'll right click and new file and this
file name is Products Dot Component Dot T.S..
I notice while naming I'll write the folder and file name the same.
Of course, this is not a rule, but it is a very good method for organizing as well as for convenience
and clarity.
And see the file with the tax extension.
All right, so this is indeed important.
OK, so now we have an empty component file.
How do we create a component structure?
So first of all, the component that we created is actually a typescript class.
And I'm creating a class for.
In order to export this glass outside the file, I'll write export at the beginning.
Right, so now we have created a normal typescript class.
Now, up until now, we haven't said anything to Angular, telling it that it's a component.
So we should declare that this structure we create is actually a component.
So how do you do that?
Well.
Just like this at Component Decorator.
That's right.
This is where the component decorator comes into play.
So we can use this decorator to tell Angular that this file is a component.
Now, decorator's always take the at sign in front of them.
So now when we use his decorator, it gives us a warning.
Oh, no.
Why you say.
But it's just because TypeScript didn't know about this decorator from the start.
So that means that we have to import the component.
And then right from.
The package we imported is at Angular Igor.
And we can say that this package contains the basic functions of angular.
And yes, it's thanks to this at Component Decorator.
The typescript component knows, and then the file can be compiled as JavaScript.
However, the file is still empty and it hasn't gained any of the functionality so far, so we've got
to stay together on this, right, because we first have to start filling in the class.
So what'll I do?
I'll write Selecter.
So the HTML tag that we'll write here when using this component and other components, right, and look
at this, if we write it in this way, we can write it like this when calling it in other places.
Or if we put a dot in front of it like this, we call it as a div class.
Or if we put a hash sign in front of it, we could write the I.D. here, right?
So it's the same exact logic.
But now I'm just going to use it this way.
So we have now created The Selecter for later use and other components.
Next up, we have another important part, which is the template.
And this is actually the HTML page of our component, so over this first I create a new file under this
folder.
And don't forget to write the e-mail at the end.
All right, so this is our file that we will keep our timecode.
And look at this, I write in the template your URL.
And the path of our HTML file in the component, since these two files are under the same folder, I
can write it like this.
So now let's add a simple code to this HTML file.
Now, we have simply created our component, so let's have a look now, when we create a component,
we need two basic files.
TypeScript and HTML.
So now Angular uses different components to create Web pages and uses modules to combine different parts.
Right.
So that means that we have to notify the module of this component that we've now created.
Because module's bundled different parts into one package and Angular offers his package.
So now we need to declare this component we created to the module so that Angular can use this component.
So for now, we're going to prepare applications on a single module, and that's the app module.
Then, as applications grow, multiple modular structures can be used, but for now.
We'll continue on a single module.
And we're going to talk about these topics in detail while explaining the module topic, so let's open
up the app module and we can see how to add our component.
So when we look at the content of this place, we see an empty class.
And there is some other information that's been imported and we see the engie module decorator imported
from at Angor and we see that four different features are used in these declarations imports, providers
and bootstrap.
Now, we've talked about bootstrap before, and it specifies which component to start with first and
then what application is run.
Now, it was communicating with our index dot html page, so we don't have to make any changes here.
Now, there is already the app component in the declaration's directory, even though it is in the bootstrap
directory, we've got to specify it here.
Because it's a component of our application, so we specify the components that we're going to use here.
So now we also add our new component to this section.
When we have the component, we need to import it.
When we come to it and press enter, we can automatically import.
Now, of course, we can always write it ourselves, but using it this way is so much easier.
So now TypeScript knows where to find this component.
Because by importing it, we specified where this file is.
So just like that, it's time to use the component.
Now, you remember the Selecter for this component, don't you?
Let's look at it again.
So here we will use this selector in AFG Components HTML.
So I'll open this file and.
I'm adding a little thing here.
Now, I'm calling the newly added component and look, I'm writing this like a tag.
We already talked about this earlier, so I'll say the changes and run our project.
So now I'm using the engy served a showband command for this.
And just like that, our project opens automatically in the browser.
So what do you think of that our project is now open.
And here is the part from the Abdah component, TML.
And just below is the content of the HTML page of the newly added component.
So we can see it by saying inspect.
And look at that, we can see which file they've come from.
So there you have it, my friends, that is component's, adding a component has taught us how to use
it.
So I think I think that's enough for now.
I want to see in the next lesson, though.