1
00:00:04,090 --> 00:00:06,010
Hello, everyone, and welcome back.

2
00:00:06,220 --> 00:00:11,050
We are now going to start to cover some of the more advanced features of angular core.

3
00:00:11,200 --> 00:00:16,370
We're going to start with template squaring with view child end view children.

4
00:00:16,390 --> 00:00:22,780
So these are two the curators that we have available for performing queries in our components template.

5
00:00:22,900 --> 00:00:28,630
As we have seen before, many times we can go the interaction between our components or the different

6
00:00:28,630 --> 00:00:35,380
elements of the template by simply using template references and accessing the element directly in the

7
00:00:35,380 --> 00:00:36,050
template.

8
00:00:36,100 --> 00:00:42,640
However, what happens many times, too, is that adding template references at the level of our template,

9
00:00:42,640 --> 00:00:47,300
including all our logic directly here on the template, is not sufficient.

10
00:00:47,440 --> 00:00:54,480
Many times our component itself needs a programmatic reference to some of the elements of the template.

11
00:00:54,490 --> 00:01:00,370
Let's say, for example, there could be use cases where the courts curve component needs a reference

12
00:01:00,370 --> 00:01:07,660
to the image or to the button directly here at the level of the cursor component class, the typescript

13
00:01:07,660 --> 00:01:11,400
class, and not only at the level of the template itself.

14
00:01:11,470 --> 00:01:17,710
So in that case, what we want to do is we want to perform a template query for obtaining a reference

15
00:01:17,710 --> 00:01:23,020
to an element template and access it here at the level of our component class.

16
00:01:23,080 --> 00:01:27,260
That's what the viewed child and children decorator's are for.

17
00:01:27,400 --> 00:01:29,020
Let's give a concrete example.

18
00:01:29,030 --> 00:01:34,320
We're going to switch back here to our application component and we're going to simplify a little bit.

19
00:01:34,330 --> 00:01:35,560
Our example.

20
00:01:35,560 --> 00:01:41,250
We are going to define here one single course card instead of a list of cards.

21
00:01:41,260 --> 00:01:47,560
We are then going to query this template and add that a reference here at the level of our application

22
00:01:47,560 --> 00:01:50,070
component to our course curve.

23
00:01:50,080 --> 00:01:55,380
So our cursor will no longer be part of this engy for loop.

24
00:01:55,390 --> 00:01:57,410
We only have one card.

25
00:01:57,430 --> 00:02:02,090
We are going to fill this in with the first element of our courses array.

26
00:02:02,110 --> 00:02:06,100
So we are going to access here the first element using this notation.

27
00:02:06,100 --> 00:02:11,620
And to keep this example simple, let's say that our course card component is going to add a default

28
00:02:11,620 --> 00:02:17,390
value here for our Karith index if the card index property is not filled in.

29
00:02:17,530 --> 00:02:22,300
So if nothing is specified, this is going to default to the empty string.

30
00:02:22,390 --> 00:02:23,560
We're going to try this out.

31
00:02:23,580 --> 00:02:29,800
So as we can see, we have here our card defined here at the level of our application component.

32
00:02:29,980 --> 00:02:37,270
Now, let's see, how can the application component template can get a reference to this course card

33
00:02:37,390 --> 00:02:40,060
in order to obtain a reference to the course card?

34
00:02:40,090 --> 00:02:42,610
We are going to be using The View shall decorate.

35
00:02:42,880 --> 00:02:44,380
So let's see how this works.

36
00:02:44,520 --> 00:02:50,650
We are going to define here a variable called card that is going to be, of course, card component.

37
00:02:50,830 --> 00:02:55,960
In order to populate this variable, we are going to use the following decorator view child.

38
00:02:55,960 --> 00:03:02,080
And here inside the parenthesis, we need to specify how do we want to obtain this element.

39
00:03:02,080 --> 00:03:08,280
In this case, we are going to pass in here the name of the course card component class itself.

40
00:03:08,290 --> 00:03:15,280
And this way, this variable is going to get populated with a reference to this component instance.

41
00:03:15,310 --> 00:03:18,500
Let's see that indeed this variable is getting populated.

42
00:03:18,520 --> 00:03:24,790
Let's say that whenever we click here on The View button, we're going to bring to the console our car.

43
00:03:25,000 --> 00:03:26,910
We're going to have a look at this in action.

44
00:03:26,920 --> 00:03:33,460
Let's open here to the console and let's have a look at what gets printed when we click here on Vuko.

45
00:03:33,490 --> 00:03:38,950
So as you can see, our course card component instance is getting printed to the screen.

46
00:03:38,950 --> 00:03:44,710
As you can see, this corresponds to an instance of this class we have here, the course property and

47
00:03:44,710 --> 00:03:47,560
we have here the course INM property.

48
00:03:47,710 --> 00:03:53,410
We don't happen to have here in the console the card index because it's currently undefined.

49
00:03:53,440 --> 00:03:55,600
As we can see, the view shall decorate.

50
00:03:55,630 --> 00:03:58,060
There is a template querying mechanism.

51
00:03:58,060 --> 00:04:02,080
We can use it to get references to any element in the template.

52
00:04:02,230 --> 00:04:08,470
Notice that in this case, we only have here one matching card to The View shall query that we have

53
00:04:08,470 --> 00:04:08,820
here.

54
00:04:08,920 --> 00:04:13,120
Let's see what would happen if we would have here two matching elements.

55
00:04:13,150 --> 00:04:17,370
So we are going to create here a different course card and we are going to pass it.

56
00:04:17,380 --> 00:04:20,170
The second element in the courses array.

57
00:04:20,320 --> 00:04:25,600
So if we now reload our application, we are going to see that indeed we have here two different course

58
00:04:25,600 --> 00:04:27,120
cards with different data.

59
00:04:27,310 --> 00:04:34,900
But if now we click here in one of these buttons in order to trigger here the on course selected method

60
00:04:34,900 --> 00:04:37,180
and see what value was square.

61
00:04:37,450 --> 00:04:40,780
So if we hit here, for example, this button, where do we see that?

62
00:04:40,780 --> 00:04:44,940
We have here the first matching element in our template.

63
00:04:45,070 --> 00:04:52,280
So if our query here has multiple matching elements, we are going to get here the first matching element.

64
00:04:52,300 --> 00:04:58,090
So this means that our program will not in if there are multiple matches for the query.

65
00:04:58,180 --> 00:05:00,420
And with this we have introduced the base for.

66
00:05:00,440 --> 00:05:05,790
Rationality of The View shall decorator, this decorator is very commonly needed.

67
00:05:05,840 --> 00:05:09,750
You're going to be using it all the time for building your angular components.

68
00:05:10,090 --> 00:05:15,160
Let's then dive deeper into it and see what other features it provides.