1
00:00:00,270 --> 00:00:05,160
In this lecture, we're going to perform a small adjustment to the modal component.

2
00:00:05,370 --> 00:00:08,070
Let's look inside the modal template file.

3
00:00:10,530 --> 00:00:15,120
Nested inside this template, we have a section report the title of the model.

4
00:00:15,540 --> 00:00:21,630
It has a comment above it that says Title, the title of the model sits next to the content.

5
00:00:21,900 --> 00:00:27,900
So why didn't we take it with us when cutting the content over to the authentication modal component?

6
00:00:28,260 --> 00:00:30,720
The reason has to do with the close button.

7
00:00:31,230 --> 00:00:35,880
The authentication modal component shouldn't have to worry about closing the modal.

8
00:00:36,150 --> 00:00:40,530
It's not the responsibility of the parent component to render the close button.

9
00:00:40,830 --> 00:00:44,580
However, we want the close button to appear next to the title.

10
00:00:44,850 --> 00:00:51,390
Hopefully, the problem is clear we need to provide a solution for replacing the title without forcing

11
00:00:51,390 --> 00:00:54,090
the parent component to render the close button.

12
00:00:54,540 --> 00:01:00,270
Angular has a feature called multi slot content projection for resolving this issue.

13
00:01:00,900 --> 00:01:04,860
We are not restricted to a single energy content elements.

14
00:01:05,250 --> 00:01:08,040
Multiple slots can be added to our component.

15
00:01:08,370 --> 00:01:12,540
Angular makes it easy to add multiple sources to our component.

16
00:01:12,900 --> 00:01:19,410
Above the paragraph tag in the title section, we will add another energy content element.

17
00:01:21,920 --> 00:01:25,610
On this element, we will add a property called Select.

18
00:01:28,220 --> 00:01:34,460
The select property allows us to tell angular which elements to project into this slots.

19
00:01:34,880 --> 00:01:38,300
The value for this property must be accessed string.

20
00:01:38,660 --> 00:01:41,330
It's common practice to select an attribute.

21
00:01:41,600 --> 00:01:44,150
We will select an attribute called heading.

22
00:01:46,770 --> 00:01:52,890
In Syria says we can select attributes by rapping the name of the attribute with square brackets.

23
00:01:53,220 --> 00:01:59,430
If an element has this attribute, it'll be inserted into this energy content element.

24
00:01:59,790 --> 00:02:02,880
Let's cut the paragraph element from this template.

25
00:02:05,450 --> 00:02:08,479
Open the authentication modal template file.

26
00:02:11,120 --> 00:02:16,130
At the top of the app modal element, we will insert the paragraph element.

27
00:02:18,640 --> 00:02:21,640
Lastly, we all add the heading attributes.

28
00:02:24,250 --> 00:02:27,940
The heading attribute is the most important piece of this element.

29
00:02:28,330 --> 00:02:32,560
The paragraph element will not be inserted with the rest of the content.

30
00:02:32,890 --> 00:02:38,650
It will be inserted at the location of the energy content element selecting this attribute.

31
00:02:39,010 --> 00:02:44,020
We don't have to assign a select property to every energy content element.

32
00:02:44,440 --> 00:02:48,970
We can have a default energy content element for default content.

33
00:02:49,270 --> 00:02:50,830
Let's refresh the page.

34
00:02:53,380 --> 00:03:00,100
The model is still working, the close button appears next to the title by adding multiple slots to

35
00:03:00,100 --> 00:03:04,690
our components, we can render content in different areas of our component.

36
00:03:04,930 --> 00:03:07,630
Now our component is truly reusable.

37
00:03:07,840 --> 00:03:11,350
Let's move on to toggling the visibility of the component.