1
00:00:03,700 --> 00:00:05,800
Hello, everyone, and welcome back.

2
00:00:06,040 --> 00:00:11,680
In this lesson, we are going to continue to explore the view of the crater that we have used to carry

3
00:00:11,680 --> 00:00:18,910
our template besides the functionality of querying a component based on the component class like we

4
00:00:18,910 --> 00:00:19,630
have done here.

5
00:00:19,870 --> 00:00:24,010
This declaration provides several other types of alternative queries.

6
00:00:24,020 --> 00:00:29,110
For example, we can also query based on a template reference, let's say that we are going to give

7
00:00:29,110 --> 00:00:35,650
to this card here a template, a reference name called let's call it card drive to make it clear that

8
00:00:35,650 --> 00:00:37,270
this is a template reference.

9
00:00:37,370 --> 00:00:44,770
We can also query here our course card component based on this template name we are going to replace

10
00:00:44,770 --> 00:00:45,130
here.

11
00:00:45,130 --> 00:00:51,340
In our view, shall decorated the name of the component by a name of a template reference.

12
00:00:51,340 --> 00:00:55,780
If we now try this out, we are going to see that the program is still compiling.

13
00:00:55,780 --> 00:01:00,010
And if we head over here to the council, we are going to see that now.

14
00:01:00,010 --> 00:01:03,580
We get here the coursework component just like before.

15
00:01:03,580 --> 00:01:10,880
But this time around we are wearing based on the name of the reference and not on the name of the component.

16
00:01:11,080 --> 00:01:16,600
This is useful in the scenario where we have multiple cards here on the screen and we might want to

17
00:01:16,600 --> 00:01:19,840
query them separately based on their template name.

18
00:01:20,050 --> 00:01:22,800
Let's quickly try that out to see if that works.

19
00:01:22,810 --> 00:01:28,240
We are going to name this character, reference one, and we're going to create here a second character

20
00:01:28,420 --> 00:01:30,820
that is going to point to a new course.

21
00:01:30,820 --> 00:01:33,550
We're going to make it, for example, the second of the array.

22
00:01:33,550 --> 00:01:39,700
And we're going to name this reference as reference to we are going to go here to our component and

23
00:01:39,700 --> 00:01:42,820
we are going to create here another query.

24
00:01:42,940 --> 00:01:45,810
This time around, we are going to query a second card.

25
00:01:45,820 --> 00:01:51,610
And let's also rename here these variables so that we can print them out separately to the screen.

26
00:01:51,790 --> 00:01:53,780
So let's try these out the card.

27
00:01:53,800 --> 00:01:56,350
No one is going to be printed out here.

28
00:01:56,380 --> 00:02:02,890
And we are also going to print in a separate line card number to let's see if this is working as expected.

29
00:02:02,890 --> 00:02:04,330
We reload the application.

30
00:02:04,330 --> 00:02:07,060
We can see that we have here in the two cards.

31
00:02:07,060 --> 00:02:12,430
And now if we trigger here this event handler, we are going to see that card number one corresponds

32
00:02:12,430 --> 00:02:13,990
to the first course card.

33
00:02:13,990 --> 00:02:16,220
Number two corresponds to the second course.

34
00:02:16,230 --> 00:02:18,290
So this is working as expected.

35
00:02:18,430 --> 00:02:25,300
Notice that so far we have been injecting here components, but these can also be used for injecting

36
00:02:25,420 --> 00:02:27,340
plain e-mail elements.

37
00:02:27,520 --> 00:02:33,280
Let's quickly try these out instead of injecting here a component, let's select here from the template,

38
00:02:33,280 --> 00:02:36,400
a plain e-mail element that we would like to inject.

39
00:02:36,400 --> 00:02:39,520
Let's give to this div container a template reference.

40
00:02:39,530 --> 00:02:41,340
We are going to call it container.

41
00:02:41,500 --> 00:02:47,020
So let's see, how can we query display in HTML element that the we are going to switch here to our

42
00:02:47,020 --> 00:02:49,840
component and we're going to create here a new view.

43
00:02:49,840 --> 00:02:50,850
Shall query.

44
00:02:50,890 --> 00:02:53,170
Let's first define what we are querying.

45
00:02:53,200 --> 00:02:59,670
So this is a member variable called container and we are going to give it the type element Raef.

46
00:02:59,680 --> 00:03:05,920
So this is a type from angular core that is going to allow us to handle plain native DOM elements.

47
00:03:05,920 --> 00:03:11,200
Let's annotate this with The View child, the creator, and we are going to specify that we want the

48
00:03:11,200 --> 00:03:17,920
container template to reference to make it clear that the query is being based on the name of the template

49
00:03:17,920 --> 00:03:19,940
reference and not the name of the member.

50
00:03:19,960 --> 00:03:20,380
Very well.

51
00:03:20,380 --> 00:03:25,930
Let's rename this to Container Div and let's bring these out here to the screen.

52
00:03:26,080 --> 00:03:30,130
If we now try this out, we are going to see that here in the console.

53
00:03:30,280 --> 00:03:36,280
When we click here on The View Course button, we are going to get element reference here at the level

54
00:03:36,280 --> 00:03:37,120
of the console.

55
00:03:37,120 --> 00:03:39,760
So notice that element reference is an object.

56
00:03:39,760 --> 00:03:47,050
It has a property called native element and these corresponds to this div that courses element that

57
00:03:47,050 --> 00:03:47,860
we have here.

58
00:03:48,010 --> 00:03:54,340
If we hover over it, we can see that this div is getting highlighted by the chrome dev tools and that

59
00:03:54,340 --> 00:03:59,740
it corresponds in the to the container div that we have here in our application template.

60
00:03:59,890 --> 00:04:05,470
As we can see, the view shall decorator is going to give us a different behavior depending on if we

61
00:04:05,470 --> 00:04:12,190
are using it to query plane dom element such as the case of the container live or if we are creating

62
00:04:12,190 --> 00:04:18,339
a component in the case of components, we are going to get back a reference to the component itself

63
00:04:18,339 --> 00:04:24,760
and not to the e-mail element course care that is also available here at the level of the DOM.

64
00:04:24,910 --> 00:04:31,300
On the other hand, in the case of plane e-mail elements, we are going to get the e-mail element directly.

65
00:04:31,450 --> 00:04:38,350
But each component, as we have seen earlier in the course, corresponds to Dom element, a custom dom

66
00:04:38,350 --> 00:04:42,280
element in this case, the course decorative element that we have here.

67
00:04:42,490 --> 00:04:46,230
This is also an existing e-mail tag in our page.

68
00:04:46,240 --> 00:04:51,040
So let's say that you have a use case in your application where you would like to get the reference

69
00:04:51,040 --> 00:04:57,460
to the e-mail element, of course, card and not to its component to its component instance.

70
00:04:57,610 --> 00:05:00,160
Well, that is also possible for that.

71
00:05:00,280 --> 00:05:06,580
We need to go here to our component here, to The View child query, and we need to pass in here and

72
00:05:06,580 --> 00:05:07,780
options object.

73
00:05:07,900 --> 00:05:14,140
This option object provides here a Reeth property that we can fill in with the type that we want to

74
00:05:14,140 --> 00:05:14,810
query.

75
00:05:14,830 --> 00:05:20,170
So by default, whenever we are querying a component, we are going to get the component instance.

76
00:05:20,290 --> 00:05:24,970
But we might also want to query that element reference instead.

77
00:05:25,090 --> 00:05:31,240
So with this query configuration, we are now going to get here a reference to the element and not to

78
00:05:31,240 --> 00:05:32,590
the component instance.

79
00:05:32,770 --> 00:05:33,880
Let's try this out.

80
00:05:33,910 --> 00:05:38,380
Let's see what we get here in the console whenever we print out here.

81
00:05:38,380 --> 00:05:40,690
The card one member variable.

82
00:05:40,690 --> 00:05:45,040
If we click here on Vue course, we are going to see that this time around.

83
00:05:45,190 --> 00:05:52,330
Yet here, a reference to the cost curve element as we see here, highlighted in the dev tools and not

84
00:05:52,330 --> 00:05:56,170
to the course card component instance like we had before.

85
00:05:56,350 --> 00:06:00,820
As we can see, the child's view querying mechanism is very flexible.

86
00:06:00,820 --> 00:06:07,120
Using this decorator, we can get a programmatic reference to just about anything that is part of our

87
00:06:07,120 --> 00:06:11,190
template, either a native element or a component.

88
00:06:11,320 --> 00:06:15,640
Let's now continue to dive deeper into the subject of view querying.

89
00:06:15,670 --> 00:06:18,880
We are going to talk about angular lifecycle hooks.

90
00:06:18,880 --> 00:06:22,630
We are going to introduce the after viewing it lifecycle hook.