In this lecture, we're going to move our template around to get a reusable model at the moment.
The modal template is stored in the wrong component.
Let's begin transferring the template by opening the authentication model template file.
There are a lot of classes applying to our elements.
The most important class is the hidden class on the route div element.
The Hidden Class will set the display property to none.
This is why we don't see the model appear on the page.
We're going to remove this class.
Normally we would dynamically bind this class to a property, however, we need to verify the model
is working.
We will add this class back in when we're finished with the model.
Next, let's cut the entire template.
Open the modal template file.
Pasted into the template.
We need to decide which parts of the template should be kept inside the model.
The template should contain the overall structure of the model.
You can think of this component as the base template for all models.
The inner content of the model will be interchangeable from model to model.
The content should be passed down from the parent component to the child component inside this template,
search for a comment that says tabs.
I'm going to minimize this section along with the other two sections.
The tabs, login form and registration form should be the content of the authentication model.
We're going to move these back into the authentication model component.
We will wrap these sections with the app modal component.
Next, we need to project them into the moral component.
Back in the template we will and the energy content element where we previously cut these sections.
If we did everything right, we should be able to view the model in the browser.
Save your changes and refresh the browser.
The model appears on the page.
We've successfully separated the responsibilities of the components, one component renders the model,
the other renders the content of the model.
We can reuse the model with different content in the next lecture.
We're going to make one slight adjustment to make it more reusable.