In this lecture, we're going to create our first component and get our needs at least one component
to run creating a component is a similar process to create a module.
In fact, you'll find that creating anything in angular is mostly a consistent experience.
Almost everything in Angular is made up of classes with decorators attached to them.
We will be working inside the App Dock component Dot's file inside this file.
We will export a class called app components.
Next, we will need to import a decorator called component from the angular slash core package.
Afterward, we can apply this decorator to the class.
We need to configure the component by passing it and object to the decorator.
There are two required options for the components.
We need to provide a selector and component in this object.
We will add the selector option with a value of approach.
The value for these select Selecter option is a custom tag name for our components.
The name of the tag must be a valid CIUSSS selector value.
We can't use spaces or special characters in the name.
Aside from a dash, the name should be all lowercase with dashes to separate words.
We want to be consistent with other HTML tags.
We can't override other HTML tags.
Otherwise, the browser will get confused.
We should have unique and custom names.
The next option we will add is called templates.
Its value will be a template string.
The template option can contain the HTML markup for our components.
We can add whatever we want for this example.
We're going to add a pair of paragraph tags with some text.
We have created our first component, it's time to load it in the browser.
Earlier, we received an error from the browser.
The error stems from not rendering a component.
Now that we have created a component, we can try loading it.
We're going to need to perform a series of steps to render a component.
First, we need to import it into the module.
Switch over to the app module acts file.
At the top of the file, we're going to import the app component class.
The app module is responsible for loading components necessary for our app.
We need to register if the component with our module, we can register components by adding an array
to the decorator called declarations.
Next, we can pass in the app component class.
By registering the component, Angular will allow us to use the components the browser will be able
to understand how to render the component.
Normally we can use components straight away.
However, the app component is considered the root component of our app.
The root component is responsible for loading other components.
It's similar to how the root module is responsible for loading other modules.
We need to chill angular.
This is the root component, and the configuration object will add an array called bootstrap.
Inside this array, we need to pass in a list of components for bootstrapping other components.
We will pass in the app component class.
The bootstrap component only applies to the root module and components.
When we start creating other components, we won't need to constantly pass in our components to this
array.
Only root component should be passed in.
There's one last step we need to take in the source directory.
Open the index source HTML file.
The index file is a standard HTML file.
The indexed HTML file is the file running in the browser when we view the app.
You'll notice there aren't script tags.
The development server will automatically inject our app into this file when delivering it to the browser.
It does not need to be manually included in the document.
There's nothing special about it besides this one line inside the body tag inside the body tag.
We're loading the app route.
Components using components is similar to using any other HTML tag.
It's the name of the tag surrounded by angle brackets.
Components have opening and closing tags during initialization.
Angular will insert the content of the component inside this tag.
We have complete freedom over where our app is placed.
We won't be doing anything with the tags.
We'll leave them be.
Let's check out the browser.
The app is entirely different from before.
It's not rendering the page we had in the default project.
It's cause of the template we had in the components.
The code from the template option gets rendered on the browser.
Mission accomplished.
We've successfully created and loaded our first components.
Everything is starting to come together.
We're almost at the homestretch in the last few lectures.
We're going to explore the last few files.
By the end, we will have recreated the default project.
Let's continue in the next lecture.