Hello, everyone, and welcome in this lesson, we are going to introduce the notion of content protection
before diving into content protection.
Let's make here a small change.
As you can see, we are accessing here.
The course is zero array.
An alternative way of doing this is to use NGF to create analogies for this expression so we can take,
for example, this expression here.
We based it inside NGF and we can create an alternative name for the evaluation of this expression using
that as Syntex.
So as you can see, the course is zero expression easily used here to coarse, so I can parsing this
course variable here directly to the course property.
Now let's give a quick example of what exactly is content.
Projection content projection is all about making configurable components.
So here, if we jump into our course car components, we are going to see that the template of this
component is fixed.
We can show or hide certain parts of the template using energy if we can alternate between multiple
possibilities here in our course category property.
But in general, the template of these components is fixed.
But for example, it's possible that instead of displaying here an image, we would like to display
something else that represents the course.
Maybe we would like to display here some interactive element with some buttons so we might want to display
here other things other than a plain image.
And right now, this component does not offer the possibility of changing this image by something else.
I really would like to be able to provide the image as an input here to the component.
Let's see how we can do that.
We are going to start by extracting from this template the image tag.
Let's just take the plane tag without anything else.
We're going to switch over here to our application component.
So right now, if we will restart the application, we will have nothing displayed here in place of
the image.
What we would like to do is to pass this image as a configuration element of the course card component.
We would like to place the image somewhere here in the content part of the course car tag.
So we have here the open course car tag we have here.
The close tag somewhere in the middle is the content pilot.
This is configuration that we are passing to the cursor element.
In this case, we are passing here at course image and we are already filling it in with the course,
the icon URL property, which is coming here from our elia's variable.
So now we are passing the image as configuration.
The question now is how can the course card components grab a hold of this image and display in its
templates?
Well, we can do that by using the energy content tag from angular core.
So with this tag, we are going to be able to project the content that we have available here in the
content part of the component.
Let's see this in action.
If we now reload, lower the application, we are going to see that we get again the same image here
as expected.
Now we understand the name for this feature content projection, because what is happening here is that
the content that we have here inside our cursor tag is being effectively projected into the template
using energy content.
And notice that if we add here some other content, such as, for example, let's say an H5 taxing the
total number of lessons of this particular course, if we will refresh here, our application, we are
going to see that we now get here.
This content also projected into the course card component templates.
So any content that we have here between the opening and closing tag of the course card component is
going to get projected here in the template using energy content.
If we head over here and we add a second care component, let's say that we have here a different course
card that is going to access not the same course that we are accessing here, but we are going to access
here a different course of our courses array, let's say the second course, and we don't provide any
image.
Let's say that the total number of lessons is ten.
Do not try this out.
We are going to see that we have here two cards, the first car, the head, the image and the total
of lessons correctly predicted here.
But this second can, because we did not specify here an image, only had the total license projected.
So energy content by default is going to take anything that is in the content part of our component,
anything that is.
The opening and the closing tag of the component, and it's going to be rejected here inside the template
now in some situations, these might be exactly what we want.
We want to project everything that we have here in the content part, inside one particular slot in
the template.
But there are many other situations where we would only like to do a partial projection of the content
that we have here.
For example, probably here at the level of the image, we would only like to select here the image
so that we projected here inside the curve and we ignore everything else.
So in order to do that, we can use the select property of the energy content tag here.
We can pass in a Cyesis selector that is going to restrain what gets projected.
Let's say that we only want to predict the image.
So as you can see now, we are only projecting the image in this projection slot and not the total number
of lessons of the course besides being able to project based on the element type, we can also restrict
the content that we want to project using a science class, for example, let's add here a science class
named course image.
This is being applied here to an image, but it could potentially be applied to a container.
Let's say that we have here a container div that would contain the image and the container would have
the Cyesis glass.
So we would like to project the complete container that we have here into the image slot.
We can do so by projecting based on the presence of this first class.
So here in our selected property, we are going to select based on this Cyesis class.
And as we can see, our image is being correctly projected as expected.
I've noticed that this time around the total number of lessons was not projected.
We only projected the image.
This means that not only we can use elements, selectors and Cyesis selectors to specify the content
that we want to associate to a given slot.
But we can also apply this to container elements that contain multiple elements inside it.
So if we move inside this course, this container, the total number of lessons, we are going to see
that this is also getting projected as expected.
Energy content also supports multi Slote projection.
Let's say that, for example, we would like to not only project here the content of the image, but
we would also like to project the content of the description.
Let's see, how can we do that?
We are going to start by removing the description here from the template.
This will no longer be a constant element.
This is going to be a configurable element via content projection.
We're going to start by adding here the course description to the content part of our course.
So notice that now we have here two top level elements at the level of the content part of this scale.
We have course image and a course description.
If we try this out as it is, we are going to see that we no longer have here any description present.
We can add it back to the template by projecting it based on the course description cyesis class.
So we are going to have over here to our course template.
We are going to add a second engie content tag.
And here in the select property we are going to specify the course description CSS class.
And as we can see now, the description is being projected as expected.
Now we're going back here to our application component.
Let's say that we will have here in the content part of this particular card some extra content here
that does not match either the course image, the selector or the course description selector.
Let's say that we have here some extra content, such as, for example, a text area that would allow
us to edit the course description.
If we not try this out, we are going to see that this part of the content is not getting presented
to the card as we would expect.
But let's say that we would like to add here another content projection slot that takes everything that
does not match any of the existing selectors.
So let's say that here in this engy content slot, we would like to project everything that does not
match either the course image or the course description.
CSC selectors, which would correspond to this text area here.
We can project this is a reminder content by simply applying here the engie content tag without any
select properties.
So if we try out, we are going to see that.
Now we have here the added description field projected here in these last projection slot.
Let's summarize everything that we have learned so far regarding content, projection, content projection
is all about making configurable components.
We can customize the look in.
The feel of a component via content projection by providing some content to the component that is then
going to be projected and become a part of the component template.
These can be then purely with the energy content tag at the level of the component template.
But sometimes we also need a programmatic reference to the projected content at the level of our component
class.
Let's now learn how can we obtain references to our projected content using content, child and content?
Children, this is coming right up in the next lesson.