1
00:00:00,150 --> 00:00:07,020
In this lecture, we're going to add content projection to our post component, the post component displays

2
00:00:07,020 --> 00:00:10,080
and image captions can accompany images.

3
00:00:10,350 --> 00:00:13,980
We should add an option for adding captions to our images.

4
00:00:14,280 --> 00:00:17,130
The captions should come from the parent component.

5
00:00:17,610 --> 00:00:23,490
So far, we've learned how to pass down data from the parent component to the child component.

6
00:00:23,820 --> 00:00:30,480
We can add an input decorator to a property in the post class to allow the parent component to configure

7
00:00:30,480 --> 00:00:30,750
it.

8
00:00:31,080 --> 00:00:35,550
However, it may not always be the best way to pass down content.

9
00:00:36,180 --> 00:00:39,180
What if we want to pass down to HTML content?

10
00:00:39,510 --> 00:00:44,880
Our caption can be as simple as a paragraph tag to a complex structure of elements.

11
00:00:45,270 --> 00:00:51,750
We can use inputs to accomplish this task, but I'm not a fan of writing HTML inside my classes.

12
00:00:52,110 --> 00:00:57,420
Instead of using inputs, we can accomplish this task with content projection.

13
00:00:57,990 --> 00:01:00,570
It sounds scary, but I promise it's not.

14
00:01:00,900 --> 00:01:06,720
Content projection is the process of loading content inserted into a components tag.

15
00:01:07,020 --> 00:01:09,900
Let's open the app component template file.

16
00:01:12,470 --> 00:01:19,220
Components are written with opening and closing tags like other HTML elements, elements defined by

17
00:01:19,220 --> 00:01:22,190
the browser can have content inserted in them.

18
00:01:22,610 --> 00:01:26,030
For example, our paragraph tags have content.

19
00:01:26,300 --> 00:01:28,580
If we want, we can add more tags.

20
00:01:28,850 --> 00:01:31,280
This would create a nested structure.

21
00:01:31,850 --> 00:01:36,050
We can do the same thing with our custom components components.

22
00:01:36,050 --> 00:01:41,060
Receiving content can load content anywhere in the template by default.

23
00:01:41,240 --> 00:01:45,620
Components will ignore the content inserted in between the tags.

24
00:01:45,830 --> 00:01:49,220
We need to tell angular where to insert the contents.

25
00:01:49,550 --> 00:01:52,340
This process is called content projection.

26
00:01:52,670 --> 00:01:58,760
Let's pass in a pair of paragraph tags with some dummy content inside the post component.

27
00:02:01,300 --> 00:02:04,200
Next, open the post template file.

28
00:02:06,630 --> 00:02:09,710
We need to tell Angular where to load the content.

29
00:02:10,080 --> 00:02:15,810
Angular creates a custom element for handling most of the work below the image tag.

30
00:02:15,870 --> 00:02:18,900
We will add the energy content elements.

31
00:02:21,440 --> 00:02:29,060
The energy content element will search for content inserted into our components tanks if it finds something.

32
00:02:29,240 --> 00:02:31,850
The element will be replaced with the content.

33
00:02:32,180 --> 00:02:35,600
If nothing is found, the component won't render anything.

34
00:02:36,020 --> 00:02:38,630
Inserting content is completely optional.

35
00:02:38,780 --> 00:02:45,050
Even if we have the energy content component inside our templates, let's check out the browser.

36
00:02:47,580 --> 00:02:55,140
The caption has been added to our template by using content projection, we can pass down to email content

37
00:02:55,140 --> 00:02:58,260
from the parent component to the child component.

38
00:02:58,590 --> 00:03:00,720
It's another option at our disposal.

39
00:03:01,020 --> 00:03:06,360
Many libraries will use content projection for creating skeleton components.

40
00:03:06,660 --> 00:03:11,130
We can extend these libraries by inserting HTML content.

41
00:03:11,640 --> 00:03:16,650
In the next lecture, we're going to shift our focus to lifecycle functions.