1
00:00:03,969 --> 00:00:06,130
Hello, everyone, and welcome back.

2
00:00:06,310 --> 00:00:11,980
In this lesson, we're going to talk about angular on push change detection and push change detection

3
00:00:11,980 --> 00:00:17,410
is faster than the standard of angular change detection, but it's also trickier to use.

4
00:00:17,420 --> 00:00:19,650
So there is a tradeoff going on here.

5
00:00:19,810 --> 00:00:23,220
Let's have a look at on push change detection in action.

6
00:00:23,230 --> 00:00:28,960
We are going to start with this example that we have built on our last lesson where we have here the

7
00:00:28,960 --> 00:00:35,950
key event getting detected, trigon here, the untitled changed method that is mutating directly, the

8
00:00:35,950 --> 00:00:42,910
coarse object, which is an input to the Kosaka, even though we are directly mutating here, our plane,

9
00:00:42,910 --> 00:00:48,820
JavaScript Object Angular, will still correctly reflect here the result on the screen because angular

10
00:00:48,820 --> 00:00:55,510
in default change detection is comparing the previous values here of the course description expression

11
00:00:55,510 --> 00:00:57,370
with the current latest value.

12
00:00:57,490 --> 00:01:01,210
And if it detects a difference, then Angular is going to update the view.

13
00:01:01,330 --> 00:01:04,680
Let's now switch here to a different change detection strategy.

14
00:01:04,690 --> 00:01:10,030
We're going to head over here to our component and we are going to specify here that we are now going

15
00:01:10,030 --> 00:01:12,700
to use on push change detection.

16
00:01:12,730 --> 00:01:16,840
Let's not try this out to see what happens if we now start editing here.

17
00:01:16,870 --> 00:01:22,930
The title of the course, we are going to notice that still we have here the same results.

18
00:01:22,930 --> 00:01:30,880
So it looks like on push change detection is still working exactly the same way as default change detection.

19
00:01:30,880 --> 00:01:35,560
And indeed, in this particular example, they work exactly in the same way.

20
00:01:35,570 --> 00:01:39,430
So this is a similarity between the two types of change detection.

21
00:01:39,430 --> 00:01:43,560
Both mechanisms are triggered in response to an event handler.

22
00:01:43,630 --> 00:01:49,720
So in both these situations, ANGULAR is going to make sure that the latest value of the model gets

23
00:01:49,720 --> 00:01:51,510
reflected here on The View.

24
00:01:51,520 --> 00:01:56,490
Let's now see a scenario where the two change detection mechanisms work differently.

25
00:01:56,590 --> 00:01:59,440
Let's head over here to our application component.

26
00:01:59,440 --> 00:02:03,550
And this time around, let's try to mutate the object.

27
00:02:03,670 --> 00:02:10,210
But let's not move to the course object from an event handler from inside the car scarred component.

28
00:02:10,210 --> 00:02:16,330
Instead, let's quickly create here a div with a class demo and let's add here a button.

29
00:02:16,330 --> 00:02:18,910
We are going to give some text to the button.

30
00:02:18,910 --> 00:02:21,760
We are going to add here the edit course button.

31
00:02:21,760 --> 00:02:29,290
And in response to a click on this button, we are going to be mutating the course object and change,

32
00:02:29,290 --> 00:02:31,380
for example, the title of the course.

33
00:02:31,390 --> 00:02:35,620
So when this button is clicked, we are going to add here an event handler.

34
00:02:35,620 --> 00:02:41,320
We are going to call it on edit course and let's quickly implement it here at the level of the application

35
00:02:41,320 --> 00:02:42,130
component.

36
00:02:42,160 --> 00:02:46,300
We are going inside this on a course for Axis here.

37
00:02:46,300 --> 00:02:47,830
The courses three.

38
00:02:47,860 --> 00:02:51,010
Let's say that we exosphere the first position of the array.

39
00:02:51,020 --> 00:02:54,160
So this is going to be the first Karith here on the screen.

40
00:02:54,160 --> 00:02:58,510
And we are going to mutate here the value of the description of the course.

41
00:02:58,540 --> 00:03:01,720
We are going to try to assign here a new value.

42
00:03:01,750 --> 00:03:03,400
So let's now try this out.

43
00:03:03,400 --> 00:03:08,860
We are going to reload our application and we will see what happens whenever we click on edit course.

44
00:03:08,860 --> 00:03:15,100
So if we click now on edit course, we are going to see that even though we changed here, the description

45
00:03:15,100 --> 00:03:20,710
of the course to a completely different value, that change has not been reflective on The View.

46
00:03:20,710 --> 00:03:26,650
As you can see, we have here a view synchronization issue which is being caused by the use of the on

47
00:03:26,650 --> 00:03:32,560
push change detection in order to confirm that that is indeed the case, that the change detection mechanism

48
00:03:32,560 --> 00:03:34,810
is what is causing this problem.

49
00:03:34,810 --> 00:03:39,070
Let's reload here our application using the default change detection mechanism.

50
00:03:39,070 --> 00:03:45,880
And this time around, whenever we click on edit course, the value of the course title is getting reflected

51
00:03:45,880 --> 00:03:48,340
correctly on the view as expected.

52
00:03:48,490 --> 00:03:55,990
If we activate again on push change detection and we click here in our edit button, we can see nothing

53
00:03:55,990 --> 00:03:56,740
is happening.

54
00:03:56,740 --> 00:04:01,020
So this confirms that it's indeed caused by the use of on push.

55
00:04:01,030 --> 00:04:06,400
So the question is what is going on here and how can we use this change detection mode?

56
00:04:06,430 --> 00:04:12,220
We know that it's faster, but we can also see immediately from this example that in many situations

57
00:04:12,220 --> 00:04:17,950
is going to be a bit harder to reason about if we don't take certain precautions while building our

58
00:04:17,950 --> 00:04:18,790
application.

59
00:04:18,790 --> 00:04:24,310
As we can see with the default change detection, even if we click here on a button at the level of

60
00:04:24,310 --> 00:04:30,640
the application component, Engelhard is still going to go down the whole Iraqi tree and shake all gelled

61
00:04:30,640 --> 00:04:35,290
components to see if an event trigger at the level of the parent component.

62
00:04:35,290 --> 00:04:40,810
Also, by any chance, change the data that would affect the view of the twelve components.

63
00:04:40,960 --> 00:04:47,140
On the other hand, while using on push at the level of the cursor, we can see that these Kirchherr

64
00:04:47,230 --> 00:04:55,390
will not get updated if some parent components accidentally mutates the data that the cursor is displaying.

65
00:04:55,390 --> 00:05:00,240
We can already see that one of the features of unpunched change detection is that a.

66
00:05:00,490 --> 00:05:06,910
Part of the componentry is not reversed and checked for changes under certain circumstances.

67
00:05:06,940 --> 00:05:13,930
We can clearly see that these cuts here by some reason are not getting checked for changes in the data

68
00:05:13,930 --> 00:05:14,410
model.

69
00:05:14,620 --> 00:05:17,770
But the question now here is, how does this work exactly?

70
00:05:17,860 --> 00:05:19,000
Well, let's continue here.

71
00:05:19,000 --> 00:05:20,080
Our example.

72
00:05:20,090 --> 00:05:24,040
So going back here to our David Kurzawa, then let's try something different.

73
00:05:24,190 --> 00:05:31,570
Instead of mutating here, the description of the courses object directly, just mutating the JavaScript

74
00:05:31,570 --> 00:05:31,930
object.

75
00:05:31,940 --> 00:05:36,540
Let's see what would happen if we would create here a copy of the course object.

76
00:05:36,580 --> 00:05:41,360
Let's then start by creating here a reference to the object that we want to modify.

77
00:05:41,410 --> 00:05:46,130
So as we know, we want to modify the first item of the courses array.

78
00:05:46,270 --> 00:05:51,300
Now, what we are going to do is we are going to define a new variable called New Course.

79
00:05:51,490 --> 00:05:55,540
These new course will contain the new value for the description.

80
00:05:55,540 --> 00:05:59,500
And this new course object is a copy of the course object.

81
00:05:59,510 --> 00:06:04,750
So we are going to create here a copy using here the object spread typescript notation.

82
00:06:04,750 --> 00:06:09,750
Now that we have here a new copy of the course, we are going to mutate the copy.

83
00:06:09,880 --> 00:06:16,850
So the difference here is we are not mutating an existing object that already existed in Siberia.

84
00:06:16,870 --> 00:06:23,080
Instead, we are mutating a copy that we have just created and we're going to assign each year the new

85
00:06:23,080 --> 00:06:23,500
value.

86
00:06:23,530 --> 00:06:29,830
We are going to add here that any type so that we don't get here a compilation error now that we have

87
00:06:29,830 --> 00:06:35,620
here our copy of the course that has been mutated and modified with a new description.

88
00:06:35,620 --> 00:06:41,590
What we are going to do is we are going to assign in this position of the array the copy that we have

89
00:06:41,590 --> 00:06:42,370
just created.

90
00:06:42,380 --> 00:06:45,940
So the new course variable that we have available here.

91
00:06:46,060 --> 00:06:47,500
Now, let's see how this works.

92
00:06:47,530 --> 00:06:49,020
So there's a big difference here.

93
00:06:49,030 --> 00:06:51,010
We are not mutating an object directly.

94
00:06:51,010 --> 00:06:56,950
We're going to create a copy in order to add here a new description if we now click here on the edit

95
00:06:56,950 --> 00:06:57,250
course.

96
00:06:57,260 --> 00:07:02,620
But then we're going to see that this time around, the new value is getting reflected on the screen.

97
00:07:02,620 --> 00:07:09,130
Based on this example, we can see that the cursor component got rearranged on the screen whenever one

98
00:07:09,130 --> 00:07:12,540
of the input values of the component has changed.

99
00:07:12,580 --> 00:07:16,180
So before we did not change the input of the components.

100
00:07:16,180 --> 00:07:20,290
Instead we were mutating directly and nested property in the course.

101
00:07:20,770 --> 00:07:24,040
But the object itself was exactly the same.

102
00:07:24,050 --> 00:07:30,190
Only one of its properties were being mutated in that case on purpose, did not trigger a new re of

103
00:07:30,190 --> 00:07:30,640
the view.

104
00:07:30,800 --> 00:07:36,030
But in these new case where we created here a copy of the curses object.

105
00:07:36,080 --> 00:07:41,080
So essentially we provided here to the cursor a completely different object.

106
00:07:41,080 --> 00:07:46,120
So we got here a completely different input to a different JavaScript object.

107
00:07:46,120 --> 00:07:52,060
This time around, we got here a successful rendering of the view and we have displayed here the new

108
00:07:52,060 --> 00:07:53,410
value on the screen.

109
00:07:53,410 --> 00:07:58,790
So let's quickly summarize how on push detection works from what we have seen so far.

110
00:07:58,790 --> 00:08:05,320
The first one of the main differences is that if our component is using on push, then ANGULAR is not

111
00:08:05,320 --> 00:08:11,980
going to try to detect changes on the input data by analyzing each of the expressions of the template

112
00:08:12,040 --> 00:08:18,200
instead of ANGULAR is going to try to detect changes in the input data over the component.

113
00:08:18,250 --> 00:08:24,280
We have also seen that if an event handler gets triggered, then on push change detection is going to

114
00:08:24,280 --> 00:08:28,170
be triggered just like the case of default change detection.

115
00:08:28,480 --> 00:08:33,909
And the reason is the same if an event occurred that naturally might have modified the data.

116
00:08:34,059 --> 00:08:39,730
So we now need to check if some of the components need to be rendered in response to it.

117
00:08:39,970 --> 00:08:46,720
We can see why on pushing detection mechanism will result in a better performance than default change

118
00:08:46,720 --> 00:08:47,410
detection.

119
00:08:47,410 --> 00:08:48,880
With default change detection.

120
00:08:48,880 --> 00:08:53,920
We are checking all the expressions of all the templates in the component hierarchy.

121
00:08:54,370 --> 00:08:59,980
Every time that there is an event anywhere on the application, we have to do that because we are not

122
00:08:59,980 --> 00:09:06,490
given any guarantees that that event unapparent component might have modified data, which is important

123
00:09:06,490 --> 00:09:07,940
for a child component.

124
00:09:07,990 --> 00:09:12,280
So we have to check everything, all the expressions of all the components.

125
00:09:12,700 --> 00:09:18,700
This also means that we need to keep in memory the values of the expressions that were calculated on

126
00:09:18,700 --> 00:09:20,800
the previous change detection run.

127
00:09:20,810 --> 00:09:27,640
On the other hand, with on push, if we know that the inputs of a given branch of the componentry have

128
00:09:27,640 --> 00:09:31,840
not changed, then we can skip the whole branch entirely.

129
00:09:31,870 --> 00:09:38,080
So if these Kirker component would have child components, those child components would not be checked

130
00:09:38,080 --> 00:09:45,100
for change detection if the Corsair component did not have itself some changes to it.

131
00:09:45,110 --> 00:09:49,030
So a whole branch of the componentry gets bypassed.

132
00:09:49,030 --> 00:09:54,100
Also, in the case of the input data, such as, for example, JavaScript objects such as the coarse

133
00:09:54,100 --> 00:09:58,930
object, we are comparing the data that gets passed by object reference.

134
00:09:59,170 --> 00:10:00,400
So the comparison the.

135
00:10:00,470 --> 00:10:04,110
Self is much faster when using on push.

136
00:10:04,130 --> 00:10:10,550
We need to make sure that we don't mutate the object data that gets passed to a component when we are

137
00:10:10,550 --> 00:10:16,820
using on push change detection, we have to make sure that the data that we pass is an input to a component

138
00:10:16,940 --> 00:10:23,040
does not get mutated directly by other components, such as, for example, the parent component.

139
00:10:23,090 --> 00:10:27,710
The best way to avoid this situation is to use immutable objects.

140
00:10:27,710 --> 00:10:34,610
As we can see, unposed change detection is effectively faster, but it's also a bit trickier to use.

141
00:10:34,790 --> 00:10:39,130
Let's not continue to delve deeper into the angular on pushing detection mode.

142
00:10:39,140 --> 00:10:44,210
Let's not talk about how to handle observable data streams with unposed.