I'm gonna start with a fast intro to Angular components. A component is a class that goes together
with the component decorator. The decorator accepts some metadata (the information
you're passing here inside) where you can define certain attributes. The most popular are those ones.
So first you have a selector the name of the component in the HTML. In this case "app-root"
So if you come to see this into the browser
You can see that this hello world
Is the content of this "app-root" component.
So this as a selector We will also have this template URL. That in this case is a URL, a relative path to
the file that contains the template of the component.
This one from here
AppComponent.html That as you can seen is an H1 "hello world"
In this template URL we can also have directly template.
In this case we pass, between strings, an inline template for example in this case there's this DIV HELLO
close DIV
So I can save this and you can see here the differences.
So now inside the "Hello world" we have "hello". OK.
Undo the changes... and we move of styleUrls. StyleUrls is the equivalent to template URLs
but with the stylesheet
In this case it expects an array of stylesheets that apply over this component. In this case app.component.scss
That as you can see is a completely empty file. You can see that app.component.SCSS
this is the Sass extension. So you can also pass here a CSS file, but this is a Sass file
That during the build step is compiled to CSS. I can have instead inline styles so it works
the same with an array of styles like body, background:red and so on so on.
Any way, for components
quite large
The most usual is to separate
All this information in different files.
Another property very usual in components metadata is this provider's array.
So inside here, you can pass an array of service providers that you are going to use inside the application.
However it is more usual to do this things inside the module of the application Anyway.
I undo those changes... The component you're seeing right now
is the AppComponent. In this case
This is the basic component where any other component is placed inside. And I know this, because if I come
here in app.module.ts, the main module where the whole application it's bootstraped, I've got this ngModule decorator
that has this component metadata bootstrap where I pass the component I want to place at the beginning
You can also see that all components have to be declared in the declaration's property so Angular can
identify who are those components...
...so you can use their selectors inside the HTML.