A typical Angular application consists of many components.
Components control a part of the screen called as a view in Angular.
So, when you create your screen on your Angular application,
you may divide your screen into multiple views,
each one of them being controlled by a separate component.
So far, in the example,
we have one single root component that controls the entire screen.
In this lesson, we will add in one more component that takes part of the screen and takes
control of that part of the screen and takes care of
the entire rendering of that part of the screen, here.
Let's pay a quick visit to the App component that
we already have as part of our Angular application.
So, in this component,
you can see that we are importing the component from Angular core.
So, this provides us with the ability to
define a component decorator and apply it to our class.
So, this will define one component that forms part of our Angular application.
So, in here, this particular component,
as you can see, when you define the component decorator,
it consists of several properties here one of them being the selector, here.
Now, this particular selector property defines a string here.
Note, in particular, what is contained inside the string.
It says app-root.
Now, looking back at index.html file.
So, I'm going to index.html file.
You can see that right there,
we are using this app-root as one of the tags in our index.html file.
So, now you see that this particular tag that you're using refers
to the selector of what we have specified here, app-root.
So, if you want to give a part of the screen and make that controllable by a component,
then you use the selector to specify and then you'll include
the selector tag into your HTML file.
Same thing applies also to the template of a component.
If you include another selector from another component
into the template of this component,
then that part of the screen will be handed over to
the second component to be controlled from the second component.
We will also learn about that in one of the later lessons.
Now, the second part that you see being specified is templateUrl.
This templateUrl specifies the name of the template file for this particular component.
So, in this case, as you can see, this is app.component.html.
So, that's the reason why the template is being defined in the
app.component.html file for this particular component.
In addition, you can also supply styles for this application.
So, here we are saying styleUrls and then in here,
within square brackets you are supplying this saying./app.component.scss.
So, which means that this particular SaaS file is applied to this style.
So as you saw when we created our Angular application,
I specified to the style format that I'm going use is a SCSS.
So, that's the reason why these files are SCSS.
If you do not use the style SCSS and instead create normally,
then these would be just CSS files and then you can use CSS to define
the styles that can be used in your application templates or in your component templates.
So, if you have any component specific
styles that you want to include for this particular component,
then you will include them in this file.
You can also specify the template and the style inline.
So, if you specify the style or the template inline,
you would simply specify that as with back quotes.
So, for example, I can simply,
instead of doing the templateUrl,
I can simply edit this to template and
then I will define the template within back quotes here.
So I would say and within back qootes I can even do templates like this.
So, I can say h1 and then title.
So, this would be what we call as inline template that we use within our application.
Now, if you use back quotes,
you can also use things like dollar add on in
order to use variables within your templates and so on.
In this particular course,
we're going to use separate template files
and create the templates in those HTML files instead.
I prefer that method of defining my templates rather than doing inline templates.
But if your template is very simple and contains just two or three lines,
then by all means use a inline template like this within your application.
So, let me change it back to my original value here.
Same thing for styles.
Also, I can simply say styles and then within back quotes
include my CSS classes within the back quotes.
Although as as I mentioned,
I prefer to keep them in separate files just for having clean code in my.ts files here.
So we have selector template styles.
We will also have another one called module ID.
At the moment I'm not using that for my component,
but in some cases you will need to specify the module ID explicitly for your component.
We'll see some examples of that a little bit later.
Now in addition, a component is nothing but a JavaScript class or a Type Script class.
So that's why you see here,
defining a class saying AppComponent and then you are exporting this class.
The reason why we use the export here,
so that this component can be imported into my app module.
So you saw that we were importing this into my app module.
So whenever you want to make any component or a module in portable in another module,
then you would always prepend the export to the class here.
So, in addition, also,
we see that we have some local properties that we defined
inside our classes here and these would be accessible through to my template.
So I can make use of these in my template.
So the properties that are defined inside my
component.ts file are accessible from my template files.
We'll talk about the data binding aspector a little bit later in another lesson.
To summarize, what we have learned so far is that a component is defined by
specifying the code and also specifying the corresponding template.
So, inside the code you can define properties and methods
that will be accessible from your template from the corresponding template.
So, as you saw, in the metadata,
in the decorator, in the component decorator,
you specified the template file name as one
of the properties for your component class here.
Similarly, any properties and methods that you define in
your component will be accessible from your template.
Not only that, you can also have what is called as event
binding from your template back to your components.
So, if any events are generated in your templates, so for example,
clicking of a button on your template that can trigger
calls to methods inside your code here,
the Javascript or the Type Script code here.
We will see the use of those in one of the later lessons and then there, I will, again,
revisit this point about property binding and event binding,
and explain this to you in a bit more detail.
The components in an Angular application can themselves be organized into a hierarchy.
So, you will always have a root component.
So for our application,
the app.component.ts file and
the corresponding HTML template forms the root component for our application
and this root component can then contain
components down in a hierarchy and can include components in the hierarchy.
We will see that in the very next exercise,
where we will create another component and then use that in our root component.
So, you can have multiple components being
included into your root component and these components
themselves in turn can use other components that are included inside them.
So, this hierarchy of components is what enables you to design your application's screen.
With this quick understanding of components
and how components are useful for designing our application,
we'll now go on to our next exercise where we will create
and add another component to our Angular application
and then we will define a template for that component and then we will make use of
that component inside our root component to design our screen.