1 00:00:04,180 --> 00:00:06,280 Hello, everyone, and welcome back. 2 00:00:06,490 --> 00:00:11,430 In this new section of the course, we're going to talk about the angular change detection mechanism. 3 00:00:11,470 --> 00:00:16,750 We are going to cover the standard angles to change the detection mechanism, which is on by default 4 00:00:16,750 --> 00:00:19,470 and that we have been using implicitly so far. 5 00:00:19,570 --> 00:00:24,970 And we will also cover on Pushtuns detection and even custom change detection. 6 00:00:24,970 --> 00:00:29,800 Let's start with standard change detection, which is active by default. 7 00:00:29,830 --> 00:00:32,910 Let's talk about what is exactly change detection. 8 00:00:33,040 --> 00:00:35,370 Let's first prepare here our playground. 9 00:00:35,470 --> 00:00:40,510 We are going to head over here to our template and we're going to remove the highlighted directive as 10 00:00:40,510 --> 00:00:43,270 we won't be needing it here in this example. 11 00:00:43,270 --> 00:00:48,100 And also here at this example, we had a loading here, some data from the back end. 12 00:00:48,310 --> 00:00:51,670 We are going to come back to that later on in this section. 13 00:00:51,670 --> 00:00:57,970 But right now, let's head over here to our application component and let's replace the data that we 14 00:00:57,970 --> 00:01:04,420 are getting from the backend, from these hardcoded value courses that we have here available in this 15 00:01:04,420 --> 00:01:11,410 file, the data we can remove here, this console log, and we can remove here the lowering of the data 16 00:01:11,410 --> 00:01:12,520 from the back end. 17 00:01:12,520 --> 00:01:15,040 If we try this out, we are going to see that now. 18 00:01:15,040 --> 00:01:18,310 We have here a list of courses that we are iterating through. 19 00:01:18,310 --> 00:01:23,250 But this time around, the data is coming here from this file and not from the back end. 20 00:01:23,410 --> 00:01:28,480 Let's also take a moment to remove here this provider's declaration as we won't be needing it. 21 00:01:28,480 --> 00:01:33,430 Our curtseys service is being injected via a tree shaquill injector. 22 00:01:33,430 --> 00:01:36,310 So we won't be needing here another provider. 23 00:01:36,550 --> 00:01:41,200 Now that we have this in place, let's talk about standard change detection. 24 00:01:41,290 --> 00:01:47,650 Change detection is the built in angular mechanism that ANGULAR provides us out of the box in a transparent 25 00:01:47,650 --> 00:01:53,010 way that automatically rebuilds the view whenever the model gets changed. 26 00:01:53,140 --> 00:01:54,730 Let's give here a quick example. 27 00:01:54,730 --> 00:01:57,580 Let's switch over here to the Coast Guard component. 28 00:01:57,610 --> 00:02:04,420 This Kosaka component has here an added title field where we had everything here, the course description. 29 00:02:04,540 --> 00:02:07,930 Let's say that now we would like to implement the following functionality. 30 00:02:07,930 --> 00:02:14,830 We would like to update automatically here the title of the course as we are typing here on our edit 31 00:02:14,830 --> 00:02:15,640 title book. 32 00:02:15,650 --> 00:02:21,310 So we don't want to necessarily save it to the backend immediately, but we want the UI to immediately 33 00:02:21,310 --> 00:02:24,400 reflect the new value that we are typing here. 34 00:02:24,430 --> 00:02:30,520 So in order to do that, we will have over here to our input field and we will have here an event handler. 35 00:02:30,520 --> 00:02:32,970 We are going to detect the key event. 36 00:02:33,000 --> 00:02:35,260 Then we're going to call here an event handler. 37 00:02:35,260 --> 00:02:40,300 We are going to call it on title changed and to these new event handler that we are about. 38 00:02:40,300 --> 00:02:40,900 Right. 39 00:02:40,900 --> 00:02:45,280 We are going to pass in the value of the new title that we are typing here. 40 00:02:45,280 --> 00:02:50,800 So we are going to access here our e-mail input using this template reference, and we are going to 41 00:02:50,800 --> 00:02:52,870 access the value property. 42 00:02:52,870 --> 00:03:00,160 So this expression here is going to give us at any moment in time the latest value type in our input 43 00:03:00,160 --> 00:03:00,670 works. 44 00:03:00,730 --> 00:03:06,430 Notice that if it would be the key down event, we would not get the latest value because it's the Kiip 45 00:03:06,460 --> 00:03:07,030 event. 46 00:03:07,060 --> 00:03:10,950 We are sure that we have here the latest value typed by the user. 47 00:03:11,050 --> 00:03:14,560 Now let's implement this event handler in the following way. 48 00:03:14,560 --> 00:03:19,120 We are going to head over to the Coast Guard component and we are going to create here a new method 49 00:03:19,120 --> 00:03:23,620 on title changed and we are going to have here a property new title. 50 00:03:23,720 --> 00:03:26,480 Are we going to define it as being of type string? 51 00:03:26,520 --> 00:03:32,950 What we're going to do here is we are going to access the course object that we receive this input directly 52 00:03:32,950 --> 00:03:36,220 and we're going to mutate this object directly. 53 00:03:36,220 --> 00:03:40,540 So we are going to assign here to the description of the course the new title value. 54 00:03:40,570 --> 00:03:44,740 Let's try this out to see how these works with this new version of our program. 55 00:03:44,740 --> 00:03:51,280 If we now start typing here and we modify this value to, for example, angular core course, we are 56 00:03:51,280 --> 00:03:57,460 going to see that indeed as we type, the latest value that we get here in our input box is getting 57 00:03:57,460 --> 00:04:00,100 immediately reflected here in the title. 58 00:04:00,100 --> 00:04:01,720 So how does this work? 59 00:04:01,870 --> 00:04:04,840 This is the angular change detection mechanism in action. 60 00:04:04,840 --> 00:04:09,310 So the question now is what is going on here and how does this work? 61 00:04:09,310 --> 00:04:10,090 Exactly? 62 00:04:10,210 --> 00:04:16,899 The way that this works is that Angular is going to try to update the view and reflect the latest changes 63 00:04:16,899 --> 00:04:20,620 to the model in this case, the course in the most optimal way. 64 00:04:20,620 --> 00:04:26,320 What happens here is that after each event that is getting handled by Angular in this case, for example, 65 00:04:26,320 --> 00:04:33,010 the Kiip event or the button click event in the case of this component, ANGULAR is going to go over 66 00:04:33,040 --> 00:04:38,800 all the expressions of the template that it has analyzed whenever the template was first compiled. 67 00:04:38,800 --> 00:04:45,100 And Angular is going to see if, for example, the course description is changed or if the kind of index 68 00:04:45,100 --> 00:04:51,340 is changed or even if this other value here, which is also, of course, description changed or even 69 00:04:51,340 --> 00:04:54,100 if the course category is changed. 70 00:04:54,100 --> 00:05:00,400 So ANGULAR is going to go over all the inputs of the template that can be found here via this input. 71 00:05:00,560 --> 00:05:07,580 Expression's and Angouleme is then going to decide if something has changed from last time, if any 72 00:05:07,580 --> 00:05:13,430 of the values of these expressions have changed since less time than Angela knows, that the view needs 73 00:05:13,430 --> 00:05:14,710 to be updated. 74 00:05:14,720 --> 00:05:21,020 So what Engler will do with Angular will update the part of the view that has changed accordingly. 75 00:05:21,170 --> 00:05:27,050 On the other hand, if none of these template expressions have changed since the last time that we evaluated 76 00:05:27,050 --> 00:05:32,240 them, then Angela knows that the component view does not need to be updated. 77 00:05:32,240 --> 00:05:38,660 So angular in these defaults change detection mode because we can mutate objects directly, such as 78 00:05:38,660 --> 00:05:41,630 we have done here with our coarse object. 79 00:05:41,630 --> 00:05:48,080 We've added here a new title by modifying the value here on the array instead of creating a new object, 80 00:05:48,080 --> 00:05:53,780 because this can happen because old JavaScript objects by default are mutable. 81 00:05:53,780 --> 00:05:56,930 We can change any property without replacing the object. 82 00:05:56,930 --> 00:06:01,110 Angular will have to go through all the components of the application, including here. 83 00:06:01,130 --> 00:06:07,160 The course component is going to check for each component, the value of each expression, and compare 84 00:06:07,160 --> 00:06:12,340 to the values of the same expressions before the event took place. 85 00:06:12,380 --> 00:06:16,130 So these, in summary, is how default change detection works. 86 00:06:16,130 --> 00:06:19,510 Angular is going to scan through the whole componentry. 87 00:06:19,520 --> 00:06:25,160 It's going to check for each component if the expressions have changed and if so, it's going to update 88 00:06:25,160 --> 00:06:25,970 the component. 89 00:06:26,060 --> 00:06:32,210 ANGULAR is going to do this complete check of the whole componentry after each event, such as, for 90 00:06:32,210 --> 00:06:35,540 example, the click event or the Kirp event. 91 00:06:35,540 --> 00:06:42,260 Angular will also perform a shake in case if a custom event such as, for example, the course change, 92 00:06:42,260 --> 00:06:43,890 the event gets imitative. 93 00:06:43,910 --> 00:06:50,750 The check for changes in the component template expressions will also be made in response to certain 94 00:06:50,750 --> 00:06:57,230 events such as, for example, and Ajax or Request Angular will also trigger this check in response 95 00:06:57,230 --> 00:07:01,430 to, for example, a set timeout or a set interval event. 96 00:07:01,640 --> 00:07:07,820 Instead of knowing by heart all the situations when the change detection mechanism will be triggered. 97 00:07:07,820 --> 00:07:10,580 It's better to understand this in the following way. 98 00:07:10,730 --> 00:07:16,220 Angular is trying to display data from mutable JavaScript objects on the screen. 99 00:07:16,220 --> 00:07:22,640 If anything happens at the browser, such as one example, a native dom click event, a timeout, etc., 100 00:07:22,640 --> 00:07:26,990 and that asynchronous event can potentially modify the data. 101 00:07:26,990 --> 00:07:33,320 The only way that ANGULAR has to be sure that the view always correctly reflects the data is to run 102 00:07:33,320 --> 00:07:37,670 all these checks again and the components whenever necessary. 103 00:07:37,760 --> 00:07:44,510 The default mechanism that ANGULAR uses to handle change detection, which is based on the values of 104 00:07:44,510 --> 00:07:48,440 template input expressions, is very safe and reliable. 105 00:07:48,590 --> 00:07:55,070 This way, Angular can be sure that the view is always correct and it correctly reflects the latest 106 00:07:55,070 --> 00:07:55,490 data. 107 00:07:55,550 --> 00:08:01,940 But there is a slight downside to it, which is that checking all the expressions of all the componentry 108 00:08:01,970 --> 00:08:08,510 every time that there is an event in our application might be a bit expensive in terms of performance 109 00:08:08,510 --> 00:08:10,550 for larger applications. 110 00:08:10,580 --> 00:08:16,790 Notice, however, that the vast majority of applications will never run into performance problems using 111 00:08:16,790 --> 00:08:20,000 the default standard change detection mechanism. 112 00:08:20,000 --> 00:08:25,970 So I would recommend for you to use this default change detection mechanism, which is already active 113 00:08:25,970 --> 00:08:26,990 out of the box. 114 00:08:26,990 --> 00:08:33,830 And in the vast majority of situations it just works and it transparently keeps the view in sync with 115 00:08:33,830 --> 00:08:34,440 the data. 116 00:08:34,490 --> 00:08:39,770 However, in certain situations where you need to do a performance optimization, you can also use the 117 00:08:39,770 --> 00:08:42,830 ANGULAR on push change detection mechanism. 118 00:08:42,980 --> 00:08:47,630 We are going to learn how on push change detection works in the next lesson.