1
00:00:03,820 --> 00:00:06,070
Hello, everyone, and welcome back.

2
00:00:06,220 --> 00:00:11,320
In this lesson, we're going to talk about system change detection, as we have seen before, and Google

3
00:00:11,320 --> 00:00:14,800
provides us with two mechanisms that work out of the box.

4
00:00:14,800 --> 00:00:20,980
We have the default angular change detection mode and we have also on Pushkin's detection that we have

5
00:00:20,980 --> 00:00:22,840
covered in previous lessons.

6
00:00:22,840 --> 00:00:27,150
As we have seen these two modes of change detection work in a very different way.

7
00:00:27,190 --> 00:00:33,130
The default change detection mechanism is going to base itself on the values of the expressions in the

8
00:00:33,130 --> 00:00:33,760
template.

9
00:00:33,850 --> 00:00:38,910
It's going to compare the current value with the previous value to see if a change occurred.

10
00:00:38,920 --> 00:00:42,940
If that's the case, then the component gets marked for rendering.

11
00:00:42,940 --> 00:00:47,650
On the other hand, with on push, we are pushing the data explicitly to the template.

12
00:00:47,660 --> 00:00:53,980
So we are pushing the data either via input properties or via the async pipe into the component.

13
00:00:54,070 --> 00:00:59,980
The component will know then that it needs to shake if some new data is available and decide if the

14
00:00:59,980 --> 00:01:01,390
view should be rendered.

15
00:01:01,600 --> 00:01:07,660
In both cases, if an event occurs because an event can implicitly modify the data in both situations,

16
00:01:07,660 --> 00:01:11,980
we are going to be checking the component to see if it needs to be rendered.

17
00:01:12,040 --> 00:01:16,960
These to change detection models will cover the vast majority of various cases.

18
00:01:16,960 --> 00:01:23,590
But there could be some particular situation where you need to inform Angular manually that change detection

19
00:01:23,590 --> 00:01:26,670
should be executed for a given component that is possible.

20
00:01:26,680 --> 00:01:30,600
Also, let's give here a concrete example where that might come in handy.

21
00:01:30,640 --> 00:01:36,700
Let's switch here to our application component and let's leave it running here using on push change

22
00:01:36,700 --> 00:01:37,300
detection.

23
00:01:37,390 --> 00:01:43,060
Now, what we are going to do is we are going to switch here to our template and we are going to again

24
00:01:43,060 --> 00:01:45,880
remove here the use of the async pipe.

25
00:01:45,880 --> 00:01:51,580
So instead of providing an observable to the template unsubscribing to it using the async pipe, let's

26
00:01:51,580 --> 00:01:52,690
just define here.

27
00:01:52,690 --> 00:01:55,630
A course is synchronous member variable.

28
00:01:55,720 --> 00:01:58,440
So this will be an array of courses.

29
00:01:58,540 --> 00:02:03,850
Now, instead of assigning here to these observable variable, we are going to call the back and we're

30
00:02:03,850 --> 00:02:05,840
going to subscribe to these observable.

31
00:02:05,860 --> 00:02:11,170
We are going to take the courses that we get from the backend and we are going to assign it here to

32
00:02:11,170 --> 00:02:13,360
the courses member variable.

33
00:02:13,360 --> 00:02:18,520
And notice that because we are using here on push change detection, if we try this out, we are going

34
00:02:18,520 --> 00:02:21,100
to see that there is no data on the screen.

35
00:02:21,100 --> 00:02:26,060
And this is because there is no way for this component to know that it needs to be rendered.

36
00:02:26,080 --> 00:02:32,890
We did not pass the data via a pipe to the template and we did not provide the data via a component

37
00:02:32,890 --> 00:02:33,760
input either.

38
00:02:33,880 --> 00:02:38,170
So there is really here no way for this component to know that it needs to be rendered.

39
00:02:38,230 --> 00:02:44,320
However, if we would like to manually inform Angular that whenever some data arrives here from the

40
00:02:44,320 --> 00:02:50,230
backend, that in that case we would like to mark the component for a change detection check, then

41
00:02:50,230 --> 00:02:54,760
in that case we can do so using the component change detector.

42
00:02:54,790 --> 00:03:01,360
So every component in ANGULAR has its own change detector that can be injected using the change the

43
00:03:01,840 --> 00:03:03,980
ref angular injectable.

44
00:03:04,000 --> 00:03:10,720
So this is the change detector of this particular application component and every component has its

45
00:03:10,720 --> 00:03:12,340
own change detector.

46
00:03:12,340 --> 00:03:18,190
So the change detector of our application component is going to be different than the change detector

47
00:03:18,190 --> 00:03:22,260
here that we could inject also in the course Kerith components.

48
00:03:22,270 --> 00:03:28,630
Let's then see how can we use the change detector ref to manually inform Angular that it needs to check

49
00:03:28,630 --> 00:03:29,510
these components.

50
00:03:29,510 --> 00:03:33,330
So we are going to check the API available in our change detector.

51
00:03:33,370 --> 00:03:38,740
We have here several functions and if we scroll down the list, we are going to find this function mark

52
00:03:38,740 --> 00:03:39,790
for shick.

53
00:03:39,790 --> 00:03:45,310
So these will inform Angular that this component should be checked for changes.

54
00:03:45,340 --> 00:03:48,790
Now, if we tried this out, we are going to see that this time around.

55
00:03:48,790 --> 00:03:52,290
Indeed, the data is getting correctly reflected on the screen.