1
00:00:00,150 --> 00:00:06,210
In this lecture, we're going to move our template around to get a reusable model at the moment.

2
00:00:06,360 --> 00:00:09,480
The modal template is stored in the wrong component.

3
00:00:09,900 --> 00:00:15,600
Let's begin transferring the template by opening the authentication model template file.

4
00:00:18,140 --> 00:00:21,020
There are a lot of classes applying to our elements.

5
00:00:21,200 --> 00:00:25,700
The most important class is the hidden class on the route div element.

6
00:00:26,060 --> 00:00:29,330
The Hidden Class will set the display property to none.

7
00:00:29,750 --> 00:00:32,720
This is why we don't see the model appear on the page.

8
00:00:32,930 --> 00:00:34,850
We're going to remove this class.

9
00:00:37,190 --> 00:00:43,640
Normally we would dynamically bind this class to a property, however, we need to verify the model

10
00:00:43,640 --> 00:00:44,360
is working.

11
00:00:44,660 --> 00:00:48,050
We will add this class back in when we're finished with the model.

12
00:00:48,260 --> 00:00:50,750
Next, let's cut the entire template.

13
00:00:53,270 --> 00:00:55,340
Open the modal template file.

14
00:00:57,660 --> 00:00:59,250
Pasted into the template.

15
00:01:01,800 --> 00:01:05,940
We need to decide which parts of the template should be kept inside the model.

16
00:01:06,180 --> 00:01:09,540
The template should contain the overall structure of the model.

17
00:01:09,840 --> 00:01:13,850
You can think of this component as the base template for all models.

18
00:01:14,190 --> 00:01:18,600
The inner content of the model will be interchangeable from model to model.

19
00:01:18,930 --> 00:01:25,320
The content should be passed down from the parent component to the child component inside this template,

20
00:01:25,530 --> 00:01:27,990
search for a comment that says tabs.

21
00:01:30,470 --> 00:01:34,730
I'm going to minimize this section along with the other two sections.

22
00:01:37,070 --> 00:01:43,280
The tabs, login form and registration form should be the content of the authentication model.

23
00:01:43,550 --> 00:01:47,690
We're going to move these back into the authentication model component.

24
00:01:50,220 --> 00:01:53,670
We will wrap these sections with the app modal component.

25
00:02:03,960 --> 00:02:07,590
Next, we need to project them into the moral component.

26
00:02:07,890 --> 00:02:14,490
Back in the template we will and the energy content element where we previously cut these sections.

27
00:02:16,970 --> 00:02:21,410
If we did everything right, we should be able to view the model in the browser.

28
00:02:21,680 --> 00:02:24,260
Save your changes and refresh the browser.

29
00:02:26,760 --> 00:02:28,650
The model appears on the page.

30
00:02:28,830 --> 00:02:35,400
We've successfully separated the responsibilities of the components, one component renders the model,

31
00:02:35,670 --> 00:02:38,160
the other renders the content of the model.

32
00:02:38,430 --> 00:02:42,730
We can reuse the model with different content in the next lecture.

33
00:02:42,850 --> 00:02:47,130
We're going to make one slight adjustment to make it more reusable.