In this lecture, we're going to add content projection to our post component, the post component displays
and image captions can accompany images.
We should add an option for adding captions to our images.
The captions should come from the parent component.
So far, we've learned how to pass down data from the parent component to the child component.
We can add an input decorator to a property in the post class to allow the parent component to configure
it.
However, it may not always be the best way to pass down content.
What if we want to pass down to HTML content?
Our caption can be as simple as a paragraph tag to a complex structure of elements.
We can use inputs to accomplish this task, but I'm not a fan of writing HTML inside my classes.
Instead of using inputs, we can accomplish this task with content projection.
It sounds scary, but I promise it's not.
Content projection is the process of loading content inserted into a components tag.
Let's open the app component template file.
Components are written with opening and closing tags like other HTML elements, elements defined by
the browser can have content inserted in them.
For example, our paragraph tags have content.
If we want, we can add more tags.
This would create a nested structure.
We can do the same thing with our custom components components.
Receiving content can load content anywhere in the template by default.
Components will ignore the content inserted in between the tags.
We need to tell angular where to insert the contents.
This process is called content projection.
Let's pass in a pair of paragraph tags with some dummy content inside the post component.
Next, open the post template file.
We need to tell Angular where to load the content.
Angular creates a custom element for handling most of the work below the image tag.
We will add the energy content elements.
The energy content element will search for content inserted into our components tanks if it finds something.
The element will be replaced with the content.
If nothing is found, the component won't render anything.
Inserting content is completely optional.
Even if we have the energy content component inside our templates, let's check out the browser.
The caption has been added to our template by using content projection, we can pass down to email content
from the parent component to the child component.
It's another option at our disposal.
Many libraries will use content projection for creating skeleton components.
We can extend these libraries by inserting HTML content.
In the next lecture, we're going to shift our focus to lifecycle functions.