1
00:00:04,150 --> 00:00:06,250
Hello, everyone, and welcome back.

2
00:00:06,580 --> 00:00:12,560
In this lesson, we are going to cover the only remaining life cycle that we have not covered so far.

3
00:00:12,640 --> 00:00:17,550
It's going to be the after you checked Life-cycle Hook, let's quickly implement it.

4
00:00:17,560 --> 00:00:22,750
We are going to implement this interface after a checked and we are going to implement here the corresponding

5
00:00:22,750 --> 00:00:25,120
method engy after vukic.

6
00:00:25,360 --> 00:00:31,540
These Life-cycle hook is very similar to Engy after Caulton checked, as the name indicates.

7
00:00:31,570 --> 00:00:37,260
So let's quickly add here some logging so that we see when is this method getting cold?

8
00:00:37,270 --> 00:00:42,730
Now that we have the logging in place, let's reload here our application and have a look at the log

9
00:00:42,880 --> 00:00:44,320
so we can see that again.

10
00:00:44,320 --> 00:00:48,400
The constructor endian changes and on it is called.

11
00:00:48,400 --> 00:00:54,310
Then we have here engy after contin check called immediately after that, as we have seen before.

12
00:00:54,310 --> 00:01:00,940
And after that we have engy after vukic for clear here to the log and we perform here an event.

13
00:01:00,940 --> 00:01:03,540
Let's say that we click here the edit button.

14
00:01:03,550 --> 00:01:05,290
We are going to see that again.

15
00:01:05,290 --> 00:01:13,020
We have here a call to engy on changes to Engy after content checked to NGF after view check.

16
00:01:13,360 --> 00:01:20,530
So it looks like engy after Vuit check is going to also get calls with each angular change detection

17
00:01:20,530 --> 00:01:21,250
execution.

18
00:01:21,250 --> 00:01:26,930
And it also seems that it will always be called after engy after contant check.

19
00:01:27,040 --> 00:01:28,510
So what is going on here?

20
00:01:28,570 --> 00:01:31,390
When is this called exactly by angular.

21
00:01:31,510 --> 00:01:32,350
Well, angular.

22
00:01:32,350 --> 00:01:38,800
After checking the content part of the cursor component for changes in order to determine if the component

23
00:01:38,800 --> 00:01:45,010
gets rendered, the next thing that ANGULAR is going to do after performing the content projection of

24
00:01:45,010 --> 00:01:50,980
the course image into the engine called Untag Angular will then check the template itself.

25
00:01:50,980 --> 00:01:55,720
So everything else other than the content part to see if something is changed.

26
00:01:55,720 --> 00:02:02,380
Once Angular finishes checking the content of this component to see if something has changed, then

27
00:02:02,380 --> 00:02:06,730
Angular is going to call these methods here engy after vukic.

28
00:02:06,940 --> 00:02:12,640
So this means that here in these life-cycle hook we can no longer modify anything that is being used

29
00:02:12,640 --> 00:02:14,470
directly here by The View.

30
00:02:14,500 --> 00:02:19,750
So if we try to modify here, for example, the value of the course description, we are going to get

31
00:02:19,750 --> 00:02:20,350
an error.

32
00:02:20,530 --> 00:02:22,630
Let's confirm if that is indeed the case.

33
00:02:22,630 --> 00:02:28,610
We are going to change here, the value to Engy after Vukic and we are going to reload here.

34
00:02:28,630 --> 00:02:29,500
The application.

35
00:02:29,500 --> 00:02:31,930
So surprisingly, we still get here.

36
00:02:31,930 --> 00:02:37,180
The value set by Engy after content checked these assignments here.

37
00:02:37,210 --> 00:02:42,970
Then in these life-cycle hook after the view has been checked for changes, has not been applied here

38
00:02:42,970 --> 00:02:43,600
to the user.

39
00:02:43,600 --> 00:02:48,460
So we have here a problem where the view is not in sync with the latest model.

40
00:02:48,580 --> 00:02:55,570
But more than that, if we switch this component here to use default change detection instead of on

41
00:02:55,570 --> 00:02:58,770
push change detection, we are now going to get here and there.

42
00:02:58,930 --> 00:02:59,830
Let's have a look.

43
00:02:59,860 --> 00:03:02,490
The error is very similar to what we had before.

44
00:03:02,500 --> 00:03:07,170
We're going to see that it says expression has changed after it was checked.

45
00:03:07,270 --> 00:03:08,890
So what's going on here?

46
00:03:09,080 --> 00:03:12,730
Angular started by checking this component here for changes it.

47
00:03:12,730 --> 00:03:18,970
Check then for the content part, and then it moved on to the component template and checked here.

48
00:03:19,120 --> 00:03:25,360
In the case of default change detection, if any of this input expressions here have changed after doing

49
00:03:25,360 --> 00:03:31,750
that check, Angular called engy after we've checked in order to notify us that the component has been

50
00:03:31,750 --> 00:03:33,930
completely checked for changes.

51
00:03:33,940 --> 00:03:40,270
Now, if we try to further modify the data after the checks were completed, we are going to get here

52
00:03:40,270 --> 00:03:46,620
an error saying that an expression of the template has changed after the checks have been completed.

53
00:03:46,750 --> 00:03:52,120
And again, we get here and there, meaning that Angular does not know which one of the two values it

54
00:03:52,120 --> 00:03:54,270
should use in order to update the view.

55
00:03:54,430 --> 00:04:00,280
This means that in general, in engie after view check, we cannot modify the data that is getting displayed

56
00:04:00,280 --> 00:04:01,450
by the component.

57
00:04:01,450 --> 00:04:03,310
If we do so, we get an error.

58
00:04:03,310 --> 00:04:06,880
So the question now is when is this method useful?

59
00:04:06,880 --> 00:04:09,510
What are the main use cases for this method?

60
00:04:09,580 --> 00:04:10,780
Let's give an example.

61
00:04:10,780 --> 00:04:13,870
When NGF after review, it might be useful.

62
00:04:13,930 --> 00:04:19,420
Let's say that we have here a list of candidates and we are going to provide a new value for that list,

63
00:04:19,420 --> 00:04:23,350
adding more courses whenever new courses are added to the list.

64
00:04:23,350 --> 00:04:27,420
We would like to scroll to the bottom of the page engy after view check.

65
00:04:27,430 --> 00:04:33,220
That would be a great place to implement that scrolling logic because at this point the new elements

66
00:04:33,220 --> 00:04:36,160
have already been applied by Engelhard to the DOM.

67
00:04:36,160 --> 00:04:42,580
So if we call scroll at that moment in time, then we will effectively see some scrolling on the screen.

68
00:04:42,580 --> 00:04:48,310
If we would call the scroll operation before the elements would not be present on the page, so the

69
00:04:48,310 --> 00:04:50,800
scroll would not have any effect.

70
00:04:50,950 --> 00:04:57,100
Let's now quickly summarize everything that we have learned about Engy after content check and engie

71
00:04:57,100 --> 00:04:58,060
after vukic.

72
00:04:58,210 --> 00:05:00,520
So both life-cycle hooks are called.

73
00:05:00,580 --> 00:05:06,310
With every angle, change, detection, execution for every component, the call to check method is

74
00:05:06,310 --> 00:05:12,210
going to get called first after checking if the content part of the component had any changes.

75
00:05:12,220 --> 00:05:14,910
And then we are going to call the hedgy.

76
00:05:14,920 --> 00:05:21,640
After you checked method after the view itself of the component has been checked for any changes.

77
00:05:21,760 --> 00:05:28,630
This means that this method here, engy after constant check is a great place to do any modifications

78
00:05:28,630 --> 00:05:33,680
to the data of the component before it gets checked for changes.

79
00:05:33,700 --> 00:05:37,310
It's the last opportunity to modify the data on the template.

80
00:05:37,420 --> 00:05:43,330
There is a restriction, though we cannot modify data in the content part of the component that is not

81
00:05:43,330 --> 00:05:44,900
allowed here in this method.

82
00:05:45,040 --> 00:05:50,980
On the other hand, on engie, after you check, we can no longer modify anything that relates to this

83
00:05:50,980 --> 00:05:51,520
component.

84
00:05:51,530 --> 00:05:57,400
We cannot modify anything in the content part or in the template of the component itself.

85
00:05:57,400 --> 00:06:02,980
No data modification that is relevant to the component is allowed here in this methods.

86
00:06:03,000 --> 00:06:08,440
This method is a great place to perform common DOM operations, such as scrolling to the bottom of the

87
00:06:08,440 --> 00:06:14,740
list, setting the focus on a given element, etc. that was not present in the beginning of the change

88
00:06:14,740 --> 00:06:16,210
detection execution.

89
00:06:16,210 --> 00:06:17,610
With both methods.

90
00:06:17,620 --> 00:06:23,140
It's very important to bear in mind that the code that we put here needs to be very lightweight.

91
00:06:23,140 --> 00:06:29,710
If we put some heavy operations in these methods, we are going to slow down our user interface into

92
00:06:29,710 --> 00:06:30,280
a crawl.

93
00:06:30,280 --> 00:06:34,510
And this is because these two methods are executed very frequently.

94
00:06:34,510 --> 00:06:38,190
And with these we have covered the two last Life-cycle Hook method.

95
00:06:38,320 --> 00:06:44,950
Let's now have a complete overview of all the lifecycle hooks and see the different order on which they

96
00:06:44,950 --> 00:06:46,070
are executed.

97
00:06:46,150 --> 00:06:50,950
We're able to remove these expressions here in order to have a running application, and we are now

98
00:06:50,950 --> 00:06:55,600
ready to provide a complete summary on all the multiple lifecycle hooks.