1 00:00:04,090 --> 00:00:06,290 Hello, everyone, and welcome back. 2 00:00:06,310 --> 00:00:11,530 In this lesson, we are going to introduce a couple more angular component Life-cycle hooks. 3 00:00:11,680 --> 00:00:18,190 Let's start with the on changes Life-cycle Hook in order to understand when these Life-cycle Hook is 4 00:00:18,190 --> 00:00:18,550 needed. 5 00:00:18,580 --> 00:00:20,830 Imagine that this component is here. 6 00:00:20,830 --> 00:00:25,470 Some logic that needs to react to the availability of a new course. 7 00:00:25,510 --> 00:00:31,990 So whenever the course input property changes, then something should occur here at the level of this 8 00:00:31,990 --> 00:00:32,650 component. 9 00:00:32,740 --> 00:00:39,520 Now, whenever a new input property gets to the component, the template is going to get recalculated 10 00:00:39,520 --> 00:00:41,790 and the view is going to get updated. 11 00:00:41,800 --> 00:00:44,110 So that process happens automatically. 12 00:00:44,170 --> 00:00:48,530 We don't have to do anything at the level of the component in order for that to occur. 13 00:00:48,580 --> 00:00:50,820 It's just built into ANGULAR. 14 00:00:50,830 --> 00:00:56,590 But we can imagine situations where we would like to have some sort of a callback mechanism that will 15 00:00:56,590 --> 00:01:01,330 inform us that the course has changed so that we can take some action. 16 00:01:01,330 --> 00:01:06,460 Maybe we want to compare, for example, the previous value over the course with a new value and then 17 00:01:06,460 --> 00:01:09,350 take some action here at the level of the component. 18 00:01:09,370 --> 00:01:15,640 So if you want to get notified that an input property of the component has changed, we can do so by 19 00:01:15,640 --> 00:01:18,330 using the on changes lifecycle hook. 20 00:01:18,340 --> 00:01:20,980 We are going to implement that on changes interface. 21 00:01:20,980 --> 00:01:26,000 And this interface requires one method, which is engy on changes. 22 00:01:26,020 --> 00:01:30,320 First, let's have a look at when this method is called by ANGULAR. 23 00:01:30,340 --> 00:01:33,200 We are going to have here some logging in the console. 24 00:01:33,220 --> 00:01:38,770 We are just going to log out the method engie on changes and we are going to reload our application 25 00:01:38,770 --> 00:01:41,080 and see when does this get gold. 26 00:01:41,080 --> 00:01:46,780 So we are going to open here, our console and we are going to have a look here at text so we can see 27 00:01:46,780 --> 00:01:49,120 that we have here a constructor called. 28 00:01:49,120 --> 00:01:52,030 We have here a value and defined as we have seen before. 29 00:01:52,040 --> 00:01:56,660 So the course input variable is not yet filled in at the construction time. 30 00:01:56,680 --> 00:01:57,460 This is normal. 31 00:01:57,470 --> 00:02:02,290 Then we have our very first call to engy on changes. 32 00:02:02,320 --> 00:02:10,870 Only after that we have the first and unique call to engy on it in a similar way to Engy only need this 33 00:02:10,870 --> 00:02:11,350 method. 34 00:02:11,350 --> 00:02:17,650 Engy on changes is being called by angular whenever something occurs in the component lifecycle. 35 00:02:17,660 --> 00:02:20,740 So this method is not meant for us to call it directly. 36 00:02:20,890 --> 00:02:24,940 This method also takes an argument, which is the changes argument. 37 00:02:24,970 --> 00:02:27,070 Let's have a look to see what it contains. 38 00:02:27,070 --> 00:02:31,990 We we're going to reload here, our application and we're going to see that here we have the changes 39 00:02:31,990 --> 00:02:35,260 object and if we open here, the changes object. 40 00:02:35,260 --> 00:02:37,840 We are going to have here a property called cause. 41 00:02:37,840 --> 00:02:42,130 And notice that this property is of type simple change. 42 00:02:42,190 --> 00:02:48,310 So this is an angular built in type that is going to contain here the current value of the course property. 43 00:02:48,340 --> 00:02:53,760 And we are also going to have here the previous value of the property, which was before undefined, 44 00:02:53,760 --> 00:02:53,760 defined. 45 00:02:53,770 --> 00:02:57,330 Now we have field in the property here with some data. 46 00:02:57,340 --> 00:03:03,580 We also have here an extra flag informing us if this is the first time that Hengdian changes is getting 47 00:03:03,580 --> 00:03:04,540 cold or not. 48 00:03:04,570 --> 00:03:11,320 Now, let's see how Hengdian changes works whenever we do subsequent changes to any of the input properties 49 00:03:11,740 --> 00:03:13,800 of our core scav component. 50 00:03:13,840 --> 00:03:17,290 Notice that in this case, we are only modifying here the course. 51 00:03:17,290 --> 00:03:23,710 But if we would modify here the index property, that would also show up here as a separate property. 52 00:03:23,830 --> 00:03:25,240 Let's see this in action. 53 00:03:25,240 --> 00:03:31,420 Let's say that whenever we click here on the edit button, we are going to modify a property of our 54 00:03:31,420 --> 00:03:32,590 course input. 55 00:03:32,590 --> 00:03:38,730 So we are going to modify this method instead of assigning here this value to the courses array. 56 00:03:38,770 --> 00:03:41,320 Let's say that we edit the courses array. 57 00:03:41,350 --> 00:03:43,500 We are going to access position zero. 58 00:03:43,510 --> 00:03:49,560 We are going to access the description of the course and we are going to see if this triggers engie 59 00:03:49,570 --> 00:03:50,620 on changes. 60 00:03:50,650 --> 00:03:51,910 So let's try this out. 61 00:03:51,910 --> 00:03:54,040 We are going to refresh the application again. 62 00:03:54,040 --> 00:03:59,920 We can see that the constructor was called, followed by endian changes, followed by Engy on in it. 63 00:03:59,920 --> 00:04:05,290 But now if we clear here the council and we click here on the edit course property, we are going to 64 00:04:05,290 --> 00:04:08,170 see that nothing happens and this is normal. 65 00:04:08,170 --> 00:04:10,540 This is because we are mutating here. 66 00:04:10,540 --> 00:04:12,550 The course object directly. 67 00:04:12,550 --> 00:04:18,940 We are directly modifying here the description property and these will not trigger Hengdian changes 68 00:04:18,940 --> 00:04:26,500 and GEON changes will only get triggered if the input object itself changes, not if one of the object 69 00:04:26,500 --> 00:04:27,960 properties changes. 70 00:04:28,000 --> 00:04:32,110 Now let's see what happens if we edit here our curtsies array. 71 00:04:32,110 --> 00:04:39,340 But instead of modifying here a property of the course of position zero, we are going to instead create 72 00:04:39,340 --> 00:04:45,490 a copy of the object that we have here and we are going to replace the current object that we have in 73 00:04:45,490 --> 00:04:47,100 the array with the new object. 74 00:04:47,140 --> 00:04:51,120 So let's start by defining here a constant we are going to call it cause. 75 00:04:51,130 --> 00:04:53,770 So this is the course that we want to edit. 76 00:04:53,800 --> 00:04:55,200 We have a reference to it. 77 00:04:55,300 --> 00:04:59,140 Now, what we're going to do is we are going to create here a new course. 78 00:04:59,170 --> 00:05:00,160 This is going to be a. 79 00:05:00,740 --> 00:05:06,060 Of course, object, and we're going to edit this copy and add a new description. 80 00:05:06,140 --> 00:05:07,850 Let's do that directly here. 81 00:05:07,880 --> 00:05:15,020 We are going to have here a new property description and we are going to populated with the string engie 82 00:05:15,020 --> 00:05:15,990 on changes. 83 00:05:16,010 --> 00:05:18,620 Now we are going to head over to our array. 84 00:05:18,620 --> 00:05:24,560 And instead of mutating a property of one of the elements, we are going to replace one of the elements 85 00:05:24,740 --> 00:05:26,660 with our new course. 86 00:05:26,810 --> 00:05:28,200 Now, let's try this out. 87 00:05:28,220 --> 00:05:30,310 We're going to reload the application again. 88 00:05:30,320 --> 00:05:32,390 Everything is working just like before. 89 00:05:32,390 --> 00:05:34,140 We have here some data displayed. 90 00:05:34,160 --> 00:05:40,040 But now this time around, if we click here on it, because we're going to see that the engine changes 91 00:05:40,040 --> 00:05:42,020 lifecycle, who was triggered. 92 00:05:42,050 --> 00:05:47,480 And if we shake here our changes, we have a simple change for the course property. 93 00:05:47,510 --> 00:05:53,570 We can see here that the current value contains the new description that we have just modified and that 94 00:05:53,570 --> 00:05:59,010 the previous value of our course property contains the previous description. 95 00:05:59,240 --> 00:06:03,640 Let's now summarize everything that we have learned about on changes. 96 00:06:03,650 --> 00:06:10,370 So this life cycle, who is going to get triggered by angular ones at component construction time before 97 00:06:10,370 --> 00:06:12,200 the first call to energy undenied? 98 00:06:12,200 --> 00:06:17,990 And it's going to be called again subsequently whenever any of the input properties of the component 99 00:06:17,990 --> 00:06:24,410 changes, if we modify and input data object directly by mutating one of its properties, that will 100 00:06:24,410 --> 00:06:31,340 not trigger engy on changes these lifecycle who is only triggered if we change the reference to the 101 00:06:31,340 --> 00:06:35,290 input object and not a property of the object itself. 102 00:06:35,540 --> 00:06:41,480 These life-cycle hook is meant to be used in situations where we want to have a callback getting called 103 00:06:41,480 --> 00:06:45,370 in our component whenever some of our inputs change. 104 00:06:45,380 --> 00:06:49,310 And with this we have covered almost all the lifecycle hooks available. 105 00:06:49,310 --> 00:06:53,300 We are only missing after constant check and after vukic. 106 00:06:53,420 --> 00:06:57,350 Let's then cover these remaining cycle hooks in the next lesson.