Hello, everyone, and welcome back in this lesson, we're going to talk about the content children
decorate their content.
Children works in a very similar way to content child, but it will allow us to curate collections of
elements that match the query.
So if we switch over here to our application component template, what we currently have here is only
one image per course.
Imagine that by some reason we will have here two images or even three letters of here, several coarse
image components.
Just as an example, let's now give to these coarse images some different images.
We are going to adhere to the image for coarse exposition, one in our course, this array.
And here we are going to have the image for course, too.
So as you can see, if we now reload the application, we are going to see that we have here several
images in our card.
Our course card component was doing a content shield query here based on this particular component,
of course, image component.
So if we check here our console, we are going to see that the image that we got corresponds here to
the first image on the list, the same way that we have queried only one image.
We could also query the free images in one go.
So let's try these out.
We are going to use the content children decorator and we are going to remove here the return type of
this member variable.
We are going to quickly rename it to images.
Now, before checking the results of this query, notice that we were still using here NGF the review
we need and we were getting results in the console.
But this is not the earliest possible moment where we are guaranteed that the content queries have their
values filled in in order to be notified at the earliest possible moment.
The content queries like content and content children have already been executed.
We are going to use a different lifecycle hook.
We are going to use that after content in its lifecycle hook like Engy.
After viewing it, we are going to get here a lifecycle hook method engy after content in it.
And here is the place where we are sure the content queries have already been executed.
So let's move here.
This console log that is printing the result of the content children query, let's put it here in engy
after content in it and have a look here at the results in the console so we can see that this time
around, the result of our query is aquaria least containing three elements, one per image.
We can also see that the return type of this query is going to be of type query lists.
So this is going to be a query list with a parametric type, of course, image component, meaning that
this is a container type that contains several instances, of course, image components, the same way
that we can grab here direct references to the child components.
We can also grab direct references to the corresponding DOM elements.
We can do so in the following way.
We are going to add here query options, object and specify the property.
And we're going to say that we want references to the DOM element and not to the component itself.
So if we now have a look at the content of our query list, we are going to see that indeed the content
that we are getting here are native DOM elements and not the component instances like we had before.
As you can see, the content functionality is very similar to the view child querying mechanism.
The difference is what is being queried.
In the case of content child, we are querying the content inside the engie content tags and actually
we don't even have to have projected the content in order to access the content children.
What we are querying is the content part of our component.
So this means that if we head over here to the card component and we remove all the engie content tags
and we were below the application, we are going to see that here on the console.
We are still getting here.
The content shelled query correctly executed.
So we can see that we have here a query list containing three elements.
This corresponds to the three course images that we have here in the content part of our core scav instance.
So when do you need the content query mechanism?
This will be needed if you are using content projection as we have seen.
So if you are using engie content in your components template and if by some reason you need the programmatic
reference to a part of the project, that content, that's the case when you should be using content.
Child, the view child query mechanism, on the other hand, is useful whenever we are building a component
and by some reason we need a programmatic referral.
One of the template elements that is nothing, save an energy content tag and we need a reference to
that element at the level of the component class, we can obtain that reference using one of the view
child care decorators.
And with these, we have concluded the content projection section of this course.
Let's not talk about angular templates and engie template tag in detail.