In this lecture, we are going to create two of the five components.
It's not completely necessary to create multiple components.
If we wanted to, we could create everything inside the app components.
However, that wouldn't be the wisest idea.
It defeats the purpose of using angular.
We should split our code into separate files for manageability.
We will start with the navigation components.
Let's use the angular Seelye to generate this component inside the command line.
Run the following command energy.
Generate component nav.
The component we've created will be declared inside the app module.
Sounds strange, right?
Shouldn't we declare this component inside the user module?
The truth is the navigation component will be rendered on multiple pages.
It contains links for the video system to it, shares a relationship with multiple parts of our app.
Therefore, it makes sense to declare it inside the app module.
The navigation component will hold the header of our app.
Let's grab it from the app template.
Previously, we pasted the entire static template into this component.
It has about 300 lines of code by breaking this template into smaller components.
Our app will become more manageable at the top of the template.
The first section is for the header.
You can find it by searching for a comment that says Header cut this entire section from the template.
Next, open the nav template file.
Replace the contents of this file with the code we copied earlier.
There's one last step we need to load this component inside the app template before we do, we should
verify these selector open the navigation class file.
The selector option is being set to app now.
The Seelye Prefix, the word app, which is considered good practice, switched back to the app template
file.
We will add the app nav component in the same location.
As a reminder, we don't have to declare the navigation component inside the app module if we created
the component manually.
We would have to declare the component in the module ourselves.
Let's refresh the page in the browser.
The app is functioning as usual.
We can verify the component with the angular dev tools.
Under the Components tab, the navigation component is listed as a child component of the app components.
If we hover our mouse over this component, the tool will highlight the component on the page.
We've successfully moved the header section.
Next, let's work on the model.
Presently, the model is un viewable, but it is available in our template.
By default, we want the model to be hidden until the link in the header is clicked.
It'll be easier to toggle the model by storing it in a separate component.
Go back to the editor.
And the command line, we will run the following command energy generate component user slash off modal.
The command we've entered is slightly different from before the mobile component should be declared
under the user module as we saw components are registered with the app module.
We can force these seelye to declare components in a different module by creating a component any modules
directory.
The Seelye is smart enough to understand we want the component to be declared inside the user module
just in case.
Let's verify the component was declared in the correct module by opening the user module file.
The authentication moral component is being imported directly inside this module.
Awesome.
We can move on to transferring the template, switch back to the app template file in this file, scroll
to the very bottom.
The template for the model should be the last section.
We can find it by searching for a comment that says Authentication Modal.
Cut this section from the template.
Afterward, open the authentication model template file.
Replace the contents of this file with the code we copied earlier.
We're almost finished the last step is to load this component in the app component, switch back to
the template file for the app components.
We will add the component in the same location.
We cut the template.
The name of the component is called app authentication modal.
You can verify the name by opening the class file of the respective component and checking the value
for the selector option.
Let's refresh the page.
The application is not working anymore.
The message is telling us the app failed to compile.
Let's discuss this error in detail in the next lecture.