Hello again, everyone.
So we created the general scheme that will enable data transmission the last time.
So in this lesson, we're going to create a component structure that we're going to use for this particular
project.
Now we've learned to create components.
Now we can build a component via Seelie.
But let's review how we created to create our component under the app module, so we're all just right
click and create a new component to yes file.
And first, we will create our class and of course, there will be an export at the beginning.
And then we create our class and there will be an export at the beginning.
And of course, we will then import this from angular core.
And some important information that we use and the decorator.
The first of these is Selecter.
And as you may remember, the expression that we specify how to call The Selecter when using this component
outside.
Now, here we can use an American style page.
For this, I will create our component HD and six files.
Then we're going to fill in the template, you, Earl in style, you Earl sections in this decorator.
So let me just remind you that the style you earles here express an array.
So that means we use square brackets for this.
And if we want to, we can use more than one style page here.
One is enough for now.
And now I want to use the model in which we created methods for this class, so I'm creating one model
and this is the example of the class with methods.
And now we can easily access the methods that we will create through this model.
All right, so that's the first stage of the component complete.
Now we need to add the components that we created in that module.
Yes.
And actually, we used new components with components before, if you recall.
But this time, I want to only use the components that we've just created.
That's why I'm deleting app components.
All right, so we're going to add our own components, so add our component in declarations.
And automatically the component is imported.
A sense we want this component to run when starting the project will add the component into the bootstrap.
Now, when we were on the project, see if it works correctly, add something to the HTML file.
So right.
This is a book component here.
And I will expect to see this when I run the project.
All right, so now we've got one more place to fix, so if you recall, there was an app route, part
index, HTML.
And this is from the selector in the component.
So here we need to organize just a little bit better.
All right, so we're going to specify which component will run.
So just fix it here and.
Cool.
So let's summarize this, so when you look in the main Dotts file, Yapp module will run, all right,
that's not a problem.
We've already completed the components in the app module.
Then we made the component definitions that we've created in the module text file and in bootstrap.
We specify the component that will be launched when the project is run.
And we made selecter template and style definitions in the components file.
We wrote the schema that will be seen when we run our project in the HTML file.
And on the index HTML page, we specify The Selecter.
So when the project runs, its component knows that it's going to run, so it looks pretty good to me.
Let's run it and see.
And here we see the e-mail content that we have created right here in the browser.
And we will continue our edits on this page.
All right, my friends, we have made the necessary component definitions that we're going to be using.
So I want to see in the next lesson.