1
00:00:04,030 --> 00:00:09,610
Hello, everyone, and welcome back in this lesson, we're going to talk about the two last angular

2
00:00:09,610 --> 00:00:12,980
component life cycle hooks that we haven't covered so far.

3
00:00:13,150 --> 00:00:17,530
It's the after content checked and after vukic life cycle hooks.

4
00:00:17,530 --> 00:00:19,300
Let's start with the first of the two.

5
00:00:19,300 --> 00:00:25,380
After content, check these life-cycle who can be implemented by implementing the after content check

6
00:00:25,390 --> 00:00:26,350
interface.

7
00:00:26,350 --> 00:00:31,790
We can implement this interface by implementing the Engy after content check method.

8
00:00:31,810 --> 00:00:37,750
Let's quickly arrive here some logging so that we see when this method is getting called by ANGULAR.

9
00:00:37,810 --> 00:00:42,730
If we now reload the application, we're going to have a look here at the console to see what is going

10
00:00:42,730 --> 00:00:48,950
on so we can see that the constructor is getting cold of this component endian changes and engy on it

11
00:00:48,970 --> 00:00:50,050
just like before.

12
00:00:50,140 --> 00:00:54,340
And now we have here a call to Engy after constant check.

13
00:00:54,370 --> 00:00:57,970
So the question here is, why is this method of getting cold?

14
00:00:57,970 --> 00:01:01,980
When is engy after content check called by the angular framework?

15
00:01:01,990 --> 00:01:08,500
These life-cycle hook is going to get called by Angular whenever Angular finishes checking the content

16
00:01:08,500 --> 00:01:10,110
part of these components.

17
00:01:10,120 --> 00:01:13,330
So this component here is the core scart component.

18
00:01:13,350 --> 00:01:19,390
So if we switch over here to our application component template where the cursor is getting used, if

19
00:01:19,390 --> 00:01:26,440
you remember these parts here that exists between the core squared open tag and the cursor, the close

20
00:01:26,440 --> 00:01:29,620
tag, this is the content part of the component.

21
00:01:29,680 --> 00:01:35,050
In this case, this component here cause image is getting projective inside our core scarer.

22
00:01:35,200 --> 00:01:40,690
So whenever Angular is doing change detection here at the level of this component, one of the things

23
00:01:40,690 --> 00:01:47,350
that it's going to do is to check here the content part for changes in this particular case, angular

24
00:01:47,410 --> 00:01:48,360
shaking here.

25
00:01:48,370 --> 00:01:55,930
If the value of the icon of the course has changed since the last time that change detection was executed

26
00:01:56,110 --> 00:02:02,710
after performing this content check here at the level of the content part of the component, ANGULAR

27
00:02:02,710 --> 00:02:07,570
is then going to call this lifecycle hook method engie after content check.

28
00:02:07,720 --> 00:02:12,460
So this method is going to get cold with every event that ANGULAR is handling.

29
00:02:12,460 --> 00:02:14,680
Let's say, for example, that we glia here.

30
00:02:14,680 --> 00:02:17,800
Our log and we click here on the save course button.

31
00:02:17,800 --> 00:02:23,230
We're going to see that engy after content check is getting called here multiple times.

32
00:02:23,230 --> 00:02:29,050
It's getting cold here whenever we click on the button, whenever we receive some data from the back

33
00:02:29,050 --> 00:02:34,540
end, etc., it's getting cold every time that angular triggers change detection.

34
00:02:34,540 --> 00:02:39,340
If we click here on edit course, we're going to see that we are going to call endian changes like we

35
00:02:39,340 --> 00:02:40,120
have seen before.

36
00:02:40,180 --> 00:02:46,260
And we are also going to check here the content part of this component for changes.

37
00:02:46,270 --> 00:02:50,980
So after doing that, we are going to call again engy after content change.

38
00:02:51,160 --> 00:02:54,070
So as we can see, this method is getting called.

39
00:02:54,070 --> 00:03:00,340
A lot of times this means that we need to be very careful with the logic that we implement in this method.

40
00:03:00,400 --> 00:03:06,160
If we start doing things here, such as, for example, backend calls or other expensive calculations,

41
00:03:06,340 --> 00:03:10,040
that could affect a lot the performance of the application.

42
00:03:10,210 --> 00:03:14,410
This means that the code that we can implement here needs to be very lightweight.

43
00:03:14,410 --> 00:03:17,380
If we implement here some expensive calculation.

44
00:03:17,380 --> 00:03:19,450
This is going to slow down a lot.

45
00:03:19,450 --> 00:03:25,300
Our user interface, one of the natural things that we could try to do in this method is to change the

46
00:03:25,300 --> 00:03:28,210
data that is getting displayed by the component.

47
00:03:28,210 --> 00:03:34,090
So we, for example, we would like to modify the title of the course after it's changed the election

48
00:03:34,090 --> 00:03:34,600
cycle.

49
00:03:34,780 --> 00:03:39,520
These lifecycle would be a good place to implement that logic.

50
00:03:39,730 --> 00:03:40,810
Let's try this out.

51
00:03:40,810 --> 00:03:46,360
Let's say that after the content gets checked, we are going to access here our course component.

52
00:03:46,360 --> 00:03:50,830
We are going to access the description property and we are going to assign it here.

53
00:03:50,830 --> 00:03:53,980
The end after content check value.

54
00:03:54,010 --> 00:03:55,180
Let's try this out.

55
00:03:55,240 --> 00:03:56,650
We were know the application.

56
00:03:56,770 --> 00:03:58,050
We're going to see that indeed.

57
00:03:58,180 --> 00:04:04,840
We have here the string engy after content checked and we don't have here any error in the log.

58
00:04:04,840 --> 00:04:10,570
If we switch here to our cursor component, we are going to find here other examples of things that

59
00:04:10,570 --> 00:04:14,410
can be modified last second using this lifecycle hook.

60
00:04:14,410 --> 00:04:18,190
Let's say that, for example, we would like to change the category of the course.

61
00:04:18,190 --> 00:04:20,470
We would like to set it to advanced.

62
00:04:20,620 --> 00:04:23,410
We can then do that here in this lifecycle.

63
00:04:23,710 --> 00:04:26,240
So let's modify the category properly.

64
00:04:26,290 --> 00:04:28,570
We are going to access the course variable.

65
00:04:28,570 --> 00:04:32,740
We are going to modify category and let's set it to advanced.

66
00:04:32,890 --> 00:04:34,120
Let's try this out.

67
00:04:34,120 --> 00:04:39,340
We are going to reload the application and we are going to see that indeed our cart contains here a

68
00:04:39,340 --> 00:04:42,700
modified title and we have here the advanced tag.

69
00:04:42,850 --> 00:04:49,150
So it looks like these life-cycle hook is a great place to do last second modifications to the data

70
00:04:49,330 --> 00:04:51,640
after each change detection run.

71
00:04:51,640 --> 00:04:54,370
But let's not try to modify a different property.

72
00:04:54,370 --> 00:04:57,280
We are going to go here to our application component.

73
00:04:57,280 --> 00:05:00,280
And let's say that we would like to try to modify here the.

74
00:05:00,870 --> 00:05:06,540
Achint, you are property that, unlike the two other properties that we have modified successfully,

75
00:05:06,540 --> 00:05:13,620
the title and the label with the category, this property here, of course I can Eurail is being used

76
00:05:13,620 --> 00:05:15,750
in the content part itself.

77
00:05:15,930 --> 00:05:20,810
Let's see what would happen if we would try to modify this property instead of the other two.

78
00:05:20,850 --> 00:05:27,450
So here in our implementation, we are going to set the value of the course I can Eurail to the blank

79
00:05:27,450 --> 00:05:27,930
string.

80
00:05:28,020 --> 00:05:29,380
Let's see what happens now.

81
00:05:29,520 --> 00:05:34,720
So this time around, we are going to see that we get a Nager here in the console.

82
00:05:34,800 --> 00:05:41,850
So if we scroll down, we are going to get this er er expression changed after it has been checked and

83
00:05:41,850 --> 00:05:44,370
we can even see what is causing the problem.

84
00:05:44,400 --> 00:05:47,160
So it's indeed the ImageWare property.

85
00:05:47,340 --> 00:05:52,680
It had the previous value that pointed to DSL and the current value is blank.

86
00:05:52,710 --> 00:06:00,480
So it looks like we can only change certain properties of our input data in these lifecycle method.

87
00:06:00,690 --> 00:06:02,820
The question now is what is going on here?

88
00:06:02,830 --> 00:06:06,720
Why can we modify one of the properties and not the other?

89
00:06:06,840 --> 00:06:08,370
Well, the answer is simple.

90
00:06:08,550 --> 00:06:15,840
These two properties, unlike the original property, are not used here in the content part of the course

91
00:06:15,840 --> 00:06:16,870
curve component.

92
00:06:17,040 --> 00:06:22,530
So whenever Engelhard is trying to detect if something changed in the components in order to decide

93
00:06:22,530 --> 00:06:28,710
if the components should be rendered, Angular is going to start by checking the content part for changes.

94
00:06:28,740 --> 00:06:34,740
Angularity is going to shake if some of the data used by the content part in this case, the image has

95
00:06:34,740 --> 00:06:36,210
changed or not.

96
00:06:36,210 --> 00:06:42,180
Immediately after this check for changes in the content part of the component, ANGULAR is going to

97
00:06:42,180 --> 00:06:48,840
call these lifecycle hook engie after content check in order to notify the component that the framework

98
00:06:48,840 --> 00:06:52,380
is finished, checking the content part for changes.

99
00:06:52,410 --> 00:07:00,210
So now we can indeed modify here certain properties of the input data, but we can only modify properties

100
00:07:00,210 --> 00:07:03,110
that have not been used here in the content part.

101
00:07:03,270 --> 00:07:09,990
If we try to modify the iconic property after ANGULAR has already finished checking the content part

102
00:07:09,990 --> 00:07:15,240
for changes, well, that would be problematic because the goal of the change detection mechanism is

103
00:07:15,240 --> 00:07:17,830
to determine if the components should be rendered.

104
00:07:17,850 --> 00:07:24,660
So the change detection process itself should not itself modify the data that could even cause an infinite

105
00:07:24,660 --> 00:07:25,010
loop.

106
00:07:25,020 --> 00:07:30,810
Let's say that we have some data we try to shake if the data has changed in order to render the components

107
00:07:30,810 --> 00:07:36,810
and the process of checking the data would again change the data itself, creating either potentially

108
00:07:36,840 --> 00:07:43,170
a loop, even an infinite loop, or we could run into a situation where the view would not accurately

109
00:07:43,170 --> 00:07:47,720
reflect the last value of the model anymore, which is something that we want to avoid.

110
00:07:47,730 --> 00:07:50,900
That's not the goal here of the change detection mechanism.

111
00:07:50,910 --> 00:07:57,210
The goal here is to always reflect the latest data changes in the view in a transparent way.

112
00:07:57,390 --> 00:08:01,530
This means that the situation that we have created here is problematic.

113
00:08:01,530 --> 00:08:07,200
Angular is trying here to build the view based on some initial data and the process of building the

114
00:08:07,200 --> 00:08:09,300
view has itself modified.

115
00:08:09,300 --> 00:08:14,250
The data so angular does not know what to use here in this case, and it's following us here.

116
00:08:14,250 --> 00:08:19,440
And er, so if we come out again, this expression, we are going to see that again.

117
00:08:19,470 --> 00:08:25,860
We don't have an error and we have here the title and the category properties correctly modified.

118
00:08:25,890 --> 00:08:31,620
So if you are looking for a place to modify some data last second after its change detection cycle,

119
00:08:31,650 --> 00:08:33,059
this is a great place to do it.

120
00:08:33,059 --> 00:08:38,700
But be aware that you will not be able to modify properties that are part of the content, part of the

121
00:08:38,700 --> 00:08:39,330
component.

122
00:08:39,330 --> 00:08:45,450
If the component even has a content path, it might be that your component is not using content projection

123
00:08:45,450 --> 00:08:47,220
and the energy content feature.

124
00:08:47,280 --> 00:08:51,840
And with this we have covered the after content checked lifecycle hook.

125
00:08:51,990 --> 00:08:54,540
Now let's cover our last life.

126
00:08:54,960 --> 00:08:58,450
Who it's going to be the after vukic life cycle hook.

127
00:08:58,590 --> 00:09:03,870
In the end of the section, we are going to provide a complete summary of all the life cycle hooks and

128
00:09:03,870 --> 00:09:07,380
we are going to show in which order they are getting called.