1
00:00:04,000 --> 00:00:09,340
Hello, everyone, and welcome back in this lesson, we're going to talk about the content children

2
00:00:09,340 --> 00:00:10,690
decorate their content.

3
00:00:10,690 --> 00:00:16,870
Children works in a very similar way to content child, but it will allow us to curate collections of

4
00:00:16,870 --> 00:00:18,610
elements that match the query.

5
00:00:18,730 --> 00:00:25,210
So if we switch over here to our application component template, what we currently have here is only

6
00:00:25,210 --> 00:00:27,000
one image per course.

7
00:00:27,160 --> 00:00:34,850
Imagine that by some reason we will have here two images or even three letters of here, several coarse

8
00:00:34,870 --> 00:00:35,920
image components.

9
00:00:35,920 --> 00:00:41,320
Just as an example, let's now give to these coarse images some different images.

10
00:00:41,320 --> 00:00:47,230
We are going to adhere to the image for coarse exposition, one in our course, this array.

11
00:00:47,230 --> 00:00:50,630
And here we are going to have the image for course, too.

12
00:00:50,650 --> 00:00:55,360
So as you can see, if we now reload the application, we are going to see that we have here several

13
00:00:55,360 --> 00:00:57,050
images in our card.

14
00:00:57,190 --> 00:01:03,710
Our course card component was doing a content shield query here based on this particular component,

15
00:01:03,710 --> 00:01:04,959
of course, image component.

16
00:01:05,000 --> 00:01:11,050
So if we check here our console, we are going to see that the image that we got corresponds here to

17
00:01:11,050 --> 00:01:16,030
the first image on the list, the same way that we have queried only one image.

18
00:01:16,060 --> 00:01:19,200
We could also query the free images in one go.

19
00:01:19,420 --> 00:01:20,800
So let's try these out.

20
00:01:20,800 --> 00:01:26,920
We are going to use the content children decorator and we are going to remove here the return type of

21
00:01:26,920 --> 00:01:28,140
this member variable.

22
00:01:28,150 --> 00:01:31,110
We are going to quickly rename it to images.

23
00:01:31,270 --> 00:01:36,910
Now, before checking the results of this query, notice that we were still using here NGF the review

24
00:01:36,910 --> 00:01:39,610
we need and we were getting results in the console.

25
00:01:39,730 --> 00:01:46,330
But this is not the earliest possible moment where we are guaranteed that the content queries have their

26
00:01:46,330 --> 00:01:50,620
values filled in in order to be notified at the earliest possible moment.

27
00:01:50,890 --> 00:01:56,390
The content queries like content and content children have already been executed.

28
00:01:56,530 --> 00:01:58,990
We are going to use a different lifecycle hook.

29
00:01:59,200 --> 00:02:04,200
We are going to use that after content in its lifecycle hook like Engy.

30
00:02:04,240 --> 00:02:10,539
After viewing it, we are going to get here a lifecycle hook method engy after content in it.

31
00:02:10,539 --> 00:02:17,110
And here is the place where we are sure the content queries have already been executed.

32
00:02:17,110 --> 00:02:18,570
So let's move here.

33
00:02:18,610 --> 00:02:24,610
This console log that is printing the result of the content children query, let's put it here in engy

34
00:02:24,620 --> 00:02:30,220
after content in it and have a look here at the results in the console so we can see that this time

35
00:02:30,220 --> 00:02:37,530
around, the result of our query is aquaria least containing three elements, one per image.

36
00:02:37,660 --> 00:02:43,100
We can also see that the return type of this query is going to be of type query lists.

37
00:02:43,120 --> 00:02:49,660
So this is going to be a query list with a parametric type, of course, image component, meaning that

38
00:02:49,660 --> 00:02:57,190
this is a container type that contains several instances, of course, image components, the same way

39
00:02:57,190 --> 00:03:01,060
that we can grab here direct references to the child components.

40
00:03:01,060 --> 00:03:05,830
We can also grab direct references to the corresponding DOM elements.

41
00:03:05,830 --> 00:03:07,570
We can do so in the following way.

42
00:03:07,600 --> 00:03:12,820
We are going to add here query options, object and specify the property.

43
00:03:12,910 --> 00:03:18,660
And we're going to say that we want references to the DOM element and not to the component itself.

44
00:03:18,670 --> 00:03:24,580
So if we now have a look at the content of our query list, we are going to see that indeed the content

45
00:03:24,580 --> 00:03:31,780
that we are getting here are native DOM elements and not the component instances like we had before.

46
00:03:32,020 --> 00:03:38,050
As you can see, the content functionality is very similar to the view child querying mechanism.

47
00:03:38,080 --> 00:03:40,720
The difference is what is being queried.

48
00:03:40,840 --> 00:03:48,460
In the case of content child, we are querying the content inside the engie content tags and actually

49
00:03:48,460 --> 00:03:55,120
we don't even have to have projected the content in order to access the content children.

50
00:03:55,120 --> 00:03:59,730
What we are querying is the content part of our component.

51
00:03:59,740 --> 00:04:06,970
So this means that if we head over here to the card component and we remove all the engie content tags

52
00:04:06,970 --> 00:04:11,200
and we were below the application, we are going to see that here on the console.

53
00:04:11,200 --> 00:04:13,120
We are still getting here.

54
00:04:13,120 --> 00:04:16,570
The content shelled query correctly executed.

55
00:04:16,570 --> 00:04:20,829
So we can see that we have here a query list containing three elements.

56
00:04:20,860 --> 00:04:28,770
This corresponds to the three course images that we have here in the content part of our core scav instance.

57
00:04:29,020 --> 00:04:32,070
So when do you need the content query mechanism?

58
00:04:32,260 --> 00:04:36,340
This will be needed if you are using content projection as we have seen.

59
00:04:36,350 --> 00:04:43,060
So if you are using engie content in your components template and if by some reason you need the programmatic

60
00:04:43,060 --> 00:04:48,860
reference to a part of the project, that content, that's the case when you should be using content.

61
00:04:48,860 --> 00:04:56,500
Child, the view child query mechanism, on the other hand, is useful whenever we are building a component

62
00:04:56,500 --> 00:05:00,340
and by some reason we need a programmatic referral.

63
00:05:00,660 --> 00:05:06,420
One of the template elements that is nothing, save an energy content tag and we need a reference to

64
00:05:06,420 --> 00:05:13,170
that element at the level of the component class, we can obtain that reference using one of the view

65
00:05:13,170 --> 00:05:15,390
child care decorators.

66
00:05:15,510 --> 00:05:19,830
And with these, we have concluded the content projection section of this course.

67
00:05:19,830 --> 00:05:25,410
Let's not talk about angular templates and engie template tag in detail.