Hello, everyone, and welcome back.
This lesson we're going to talk about the content child decorator, this decorator works in a very similar
way to The View child operator, but it's used in the context of content projection.
If you remember The View child and The View children, decorators were used in order to query the template
of a given component so that the component class can have a direct reference to certain elements of
its own template.
The scope of this query was constrained to the template of the component and nothing else.
We can query either components and get back the component instances of the template.
We can query by a template reference name and we can even query a collection of elements using view
children.
Now, the same way that the component might want to get references to parts of its templates.
We could also imagine situations where a component that supports content projection would also like
to get references, for example, to the court's image or to the course description.
So going here inside our course component, there could be used cases where here in the course of component
class, we would like to get the direct reference to some of the projected content.
If we switch here to the coursework component template, we are going to see that the projected content
is here in save energy content.
So we cannot give it a template reference and we cannot query based on the type of the component that
will not work in order to convince ourselves that this would not work in the case of content projection.
Let's quickly create here a template reference.
We are going to call these coarse images and we are going to attempt to query discourse, image, template,
reference from inside the course component.
So let's add here a member variable.
We are going to call it coarse image as well, and we are going to annotated with The View child decorator
to the decorator.
We are going to pass a string course image.
And this contains the name of the template reference that we are trying to query.
So we are going to rename this to Image so that we are sure that we understand that it's indeed the
template reference name that we are querying.
If we know implement here the after review, we need Life-cycle Hook.
We are going to have here a method that we can use to print out to the screen the value of this image
member variable.
So let's do that.
Let's see what results do we get here in the console.
And remember, we are trying to query something that is inside this engy content tag reinspect here
to the console.
We are going to see that we get here an undefined value.
So we get here actually two times undefined.
And this is because we are defining here to cards to get a cleaner log for the rest of the section.
Let's remove here the logging statements that we have, of course, view.
Let's switch over here to the application component and let's for the moment remove the second card.
So if we now reload here, our application, we are going to see that we get here undefined.
So we are trying to bring it out here, our image element, and we get undefined, which means that
the view child query did not work.
This is working as expected because the View decorator can only query elements that are visible here
inside the templates, but it cannot see here inside the projected contents.
In order to see inside the projected contents, we are going to need a new decorator called Contant
Child.
So this works in a very similar way to view child.
But the query only covers the projected contents, so this cannot be used to query other elements of
the template.
Let's have a look at this in action.
If we reload here our application and have a look here at the console, what do we see?
That our content shall work correctly as expected.
So we can see that we got here a reference to the course image, native DOM element.
Now, let's talk about the scope of the content child query.
Let's go here to our course card component template.
And we're going to create here a new template reference.
We are going to call this our container.
So this is the device that is wrapping the whole template.
Let's try to query a reference to these div using the same mechanism we are going to replace here image
with container and let's see what we get here.
So as we can see, we get undefined.
So this means that the scope of the content child query is restricted to what we have here, inside
engie content or another way of seeing it.
The scope of the content shell query is restricted to the content part of the component.
The content childcare, he cannot see anything else in the parent template, it could not see, for
example, here the top menu, it cannot also see anything else inside the card component.
The only thing that the content child care you can see is the content part of the component instance
in question.
And these, to be more specific, is what we have highlighted here.
It's the complete content that we can see between the opening tag of this component instance and the
closing tag.
Just like the case of The View child query, the content shell decorator can also be used to query components
inside the content of the component.
As we can see here, we don't have any component to query.
These are just plain dumb elements.
So let's quickly have over to the command line and create a new component that we're going to add here.
We are going to do engy generate components and we are going to create here a component called simply
cause dash image.
This is going to generate here a couple of files.
This is already configured and ready to use.
We are going to open this specific file here, the course image component, that HTML file.
And here inside this component, we are going to paste in content of this div here, the course dash
image div.
So this is going to be the template of our course image component.
And as we can see, this course image needs here an image Eurail.
So let's quickly create here an image URL property that we are going to add here to our component.
We are going to head over here to the exploratory and we're going to open here the course image component
file.
Let's create here a new property.
We are going to add the input decorator just like before.
And we are going to create here an image.
You are property.
We are going to add here a member variable of type string.
And we're going to take a moment to demonstrate a new feature of that input.
So if we want our property to be named something else other than image URL, we can specify the alternative
name here.
So let's name this input properties simply as SIRC standing for source.
Now we are going to head over here to our application component and we are going to add here a course.
In this instance, we are going to fill in the source.
You are a property with the image of the course instance.
Let's try out this new version of the program.
And as we can see, we don't have a coarse image anymore.
If we switch over here to the implementation of the course cart component, we are going to see that
we were querying the image based on this Cyesis class.
So instead of doing our query based on the Cyesis class that is no longer present, let's do this selection
here by querying on the course image element that we have here in our application component.
So this query this time around is going to catch this element and the element is going to be projected
here on the screen.
We can see that we don't get here any image.
And that's because what we need to parsing here is the icon URL property and not image WORRILL.
So as you can see now, we are getting here the course image components getting projected inside another
component, the Corsair component.
This component here that we have highlighted is showing up here in the template of the course curve
at this position right here.
Now, let's have a look at the result of our content child query.
So we were wearing here the container.
Let's try to query the course image component.
We are going to do so not by querying a template reference, but we are going to pass in here a component
class.
So we are going to pass in here cause image component.
We are going to see that now.
The content query is going to give us back the instance of the component.
If we chequing in the console what we have here printed out in Engy after viewing it, we're going to
see that we have indeed an instance of a course image component as expected.
So as we can see, content can be used to query template references here in the content part of the
component instance, and it can also be used to query component instances directly.
So this is very similar to what was happening with view gelled.
We can query by element, we can query the native DOM element and we can query the component instance
in a very similar way to view child.
If we want to grab here a hold of the native DOM element of the coarse image tag that we have here instead
of the component instance can do so in the following way.
We are going to jump here into the course component and we are going to change here the default behavior
of our query.
So if we are trying to grab a component by default, we are going to grab the component instance, but
we can specify here the property and say that we want to grab the element reference instead.
So this time around, if we try this, we are going to see that the result of this query is the native
DOM element of this particular course image components.
So if we highlight here the coarse image element, we are seeing that it corresponds here to the image.
And as we can see here in the console, what we get back is the element reference itself.
We cover the lot in this lesson.
So let's quickly summarize.
We have covered the content.
Shall decorate that.
We should only use this decorator if we are in a situation where our component is using content projection.
And by some reason we need to grab a reference to some of the content in our component class.
Next, we are going to conclude the section on content projection.
We are going to talk about the content children decorated.