1
00:00:04,270 --> 00:00:06,280
Hello, everyone, and welcome back.

2
00:00:06,430 --> 00:00:10,740
It is listen, we are going to talk about that after viewing it Life-cycle Hook.

3
00:00:10,750 --> 00:00:16,990
So as you know, we can query our template using viewer child and we have different ways of doing so.

4
00:00:17,170 --> 00:00:23,460
But the question here is, when are these variables populated, the variables populated by viewshed?

5
00:00:23,560 --> 00:00:30,010
Let's see how early in the activation of this component can we access these variables if we give to

6
00:00:30,010 --> 00:00:32,140
this component here a constructor?

7
00:00:32,259 --> 00:00:39,640
Let's try to see if the container, for example, is already present when the constructor gets called.

8
00:00:39,760 --> 00:00:44,140
If we inspect the console, we are going to see that here at constriction time.

9
00:00:44,170 --> 00:00:47,350
Our container is still undefined.

10
00:00:47,350 --> 00:00:53,800
So the question is, what is the earliest possible moment when we are sure that these references query

11
00:00:53,800 --> 00:00:56,740
by the vehicle the decorator are already filled in?

12
00:00:56,920 --> 00:01:03,400
If we want to access these references at the earliest possible moment in order to do some sort of initialization

13
00:01:03,400 --> 00:01:07,600
operation, we're going to need a life-cycle hook for the component.

14
00:01:07,600 --> 00:01:12,030
We are going to have to implement that after view in lifecycle hook.

15
00:01:12,070 --> 00:01:16,420
So this interface will force us to implement this function.

16
00:01:16,420 --> 00:01:24,550
And after viewing it and this function is the earliest possible moment where all these references populated

17
00:01:24,550 --> 00:01:27,190
here by viewshed are available.

18
00:01:27,190 --> 00:01:33,910
It will be the angular framework itself that is going to call this method after these references are

19
00:01:33,910 --> 00:01:34,680
filled in.

20
00:01:34,730 --> 00:01:38,660
So these methods is not meant for us to call it ourselves.

21
00:01:38,920 --> 00:01:40,900
This is for the framework to call it.

22
00:01:41,110 --> 00:01:46,420
It's called a life-cycle hook because it's part of the component lifecycle.

23
00:01:46,510 --> 00:01:53,860
So let's try out here these new Life-cycle Hook and see that indeed our Karradah one reference is filled

24
00:01:53,860 --> 00:01:55,900
in by inspecting the console.

25
00:01:55,900 --> 00:01:58,390
We are going to see that at construction time.

26
00:01:58,390 --> 00:02:03,270
Our continuative is still not populaton, but here in the engie.

27
00:02:03,310 --> 00:02:10,000
After viewing it Life-cycle Hook, we can see that we get the reference to our container leave as expected

28
00:02:10,150 --> 00:02:11,080
NGF to review.

29
00:02:11,080 --> 00:02:11,890
We need it.

30
00:02:11,950 --> 00:02:17,950
The ideal place to put some initialization logic that needs access to these elements.

31
00:02:18,160 --> 00:02:25,120
When using these and other lifecycle hooks, it's important not to modify the data that the component

32
00:02:25,120 --> 00:02:26,330
is trying to render.

33
00:02:26,440 --> 00:02:30,970
So in this case, we are rendering here multiple courses to the screen.

34
00:02:31,000 --> 00:02:37,180
So if, for example, here on Engy after view, we need we will do some operation synchronously that

35
00:02:37,180 --> 00:02:39,780
would modify the data that would trigger in there.

36
00:02:39,940 --> 00:02:41,080
Let's have a look at it.

37
00:02:41,080 --> 00:02:44,140
We are going to access here the courses array.

38
00:02:44,140 --> 00:02:49,960
We are going to access the first element of the array and let's say that we modify here the description

39
00:02:49,960 --> 00:02:52,060
to some sort of test value.

40
00:02:52,070 --> 00:02:59,140
So this is to simulate a situation where our component, when initializing itself and trying to display

41
00:02:59,140 --> 00:03:05,610
the data for the first time, is during the construction process, also further modifying the later.

42
00:03:05,620 --> 00:03:07,180
Let's see what this would cause.

43
00:03:07,210 --> 00:03:10,480
If we refresh the application, we are going to see that we get here.

44
00:03:10,480 --> 00:03:14,640
And her expression changed after it has been checked.

45
00:03:14,650 --> 00:03:20,230
So if we have a further look here at the error calls and we click here on the spectrum, we are going

46
00:03:20,230 --> 00:03:25,450
to see the exact place in the component where the error is occurring.

47
00:03:25,480 --> 00:03:31,180
So as we can see, this is occurring here at the level of the first expression in our template.

48
00:03:31,300 --> 00:03:38,380
As we can see, it's very important to avoid any data modification operation to we then here synchronously

49
00:03:38,380 --> 00:03:44,830
at the level of the NGF after viewing it lifecycle method, if we set up here, and a synchronous operation

50
00:03:44,830 --> 00:03:51,850
that will modify the data in another JavaScript virtual machine in turn, then we will not run into

51
00:03:51,850 --> 00:03:52,540
this problem.

52
00:03:52,570 --> 00:03:58,690
This problem is caused because we are trying to display the data by building the view and the view.

53
00:03:58,690 --> 00:04:02,830
Construction process is accidentally further modifying the data.

54
00:04:03,100 --> 00:04:08,440
The error that gets thrown is essentially a way of the angular framework, saying that it does not know

55
00:04:08,440 --> 00:04:09,820
how to display this data.

56
00:04:09,850 --> 00:04:16,360
It does not know if it should display the initial value of the data or the new value that was created

57
00:04:16,360 --> 00:04:18,920
during the construction process itself.

58
00:04:19,120 --> 00:04:25,540
This situation could also potentially cause a loop where we are continuously modifying the data while

59
00:04:25,540 --> 00:04:31,720
attempting to rebuild the view so it would break the whole you directional data flow mechanism that

60
00:04:31,720 --> 00:04:33,400
is built in into the framework.

61
00:04:33,550 --> 00:04:36,750
And so we get an error message in development mode.

62
00:04:36,760 --> 00:04:41,860
Let's not take a moment to talk about the scope of the template queries that we are doing.

63
00:04:41,950 --> 00:04:47,860
So as we can see, we can query anything that we have here at the level of the template of the component

64
00:04:47,860 --> 00:04:48,310
itself.

65
00:04:48,320 --> 00:04:54,400
So this is the template of the application component and we have performed here queries on several elements.

66
00:04:54,430 --> 00:04:59,620
Now, what we are going to try to do is we are going to query deeper into the component hierarchy.

67
00:04:59,620 --> 00:05:00,510
So we have here a.

68
00:05:01,000 --> 00:05:07,240
Guard component that inside its template, it has here an image, let's say that, for example, we

69
00:05:07,240 --> 00:05:11,640
give it here a template reference name, let's call it the image.

70
00:05:11,680 --> 00:05:18,240
Let's try to see if these templates reference is visible here at the level of our application component.

71
00:05:18,310 --> 00:05:22,960
Let's then modify here the query that we were making to this element reference.

72
00:05:22,970 --> 00:05:26,130
We're going to try to query here the course image.

73
00:05:26,140 --> 00:05:32,560
Instead, let's remove some of the council logs that we have here to make our program easier to read.

74
00:05:32,710 --> 00:05:36,730
If we now try this out, we are going to see that here in our console.

75
00:05:36,880 --> 00:05:40,280
The coarse image member variable is undefined.

76
00:05:40,300 --> 00:05:46,870
So this confirms to us that it's not possible to query deeper into the component Iraqi.

77
00:05:47,020 --> 00:05:54,460
The scope of the view decorator queries are restricted to the template of the component itself.

78
00:05:54,610 --> 00:06:02,680
We cannot query elements inside shell components and we cannot view the templates of the parent components

79
00:06:02,680 --> 00:06:03,220
as well.

80
00:06:03,220 --> 00:06:09,340
Using View Child to summarize view child is a local template Quairading mechanism.

81
00:06:09,340 --> 00:06:16,150
Whenever we are developing a component and we somehow need the programatic reference to one of the elements

82
00:06:16,150 --> 00:06:21,970
of that particular components template, we can obtain it by using view child.

83
00:06:22,000 --> 00:06:28,630
However, we cannot use viewshed to query several levels down the component directory.

84
00:06:28,900 --> 00:06:32,990
We can only see the elements of the current component template.

85
00:06:33,100 --> 00:06:40,690
Also, we cannot see where the component is being used, so we can only really query the component template

86
00:06:40,690 --> 00:06:42,730
itself and nothing more.

87
00:06:43,030 --> 00:06:50,230
Next, we are going to talk about the companion decorated of View Child, The View Children decorated.