1 00:00:04,180 --> 00:00:06,320 Hello, everyone, and welcome back. 2 00:00:06,340 --> 00:00:11,740 In this lesson, we are going to give you a complete overview of all the angles, life cycle hooks that 3 00:00:11,740 --> 00:00:12,530 are available. 4 00:00:12,550 --> 00:00:16,480 Let's see what are all the hooks available and in which order. 5 00:00:16,480 --> 00:00:21,520 They are called by the framework and some typical use cases for each life cycle hook. 6 00:00:21,550 --> 00:00:24,180 So we already have here several life-cycle hooks. 7 00:00:24,190 --> 00:00:28,060 Let's just add the remaining ones here to our cost curve component. 8 00:00:28,120 --> 00:00:34,540 Let's also implement after contentedness, which we already saw earlier in this course, and let's also 9 00:00:34,540 --> 00:00:36,530 implement after viewing it. 10 00:00:36,610 --> 00:00:42,890 So these are the lifecycle hooks that are related to content projection and to local template queering. 11 00:00:43,060 --> 00:00:47,240 Let's quickly implement here some logging for both of these lifecycle hooks. 12 00:00:47,260 --> 00:00:51,390 I'm going to copy here the implementation of these two hooks. 13 00:00:51,390 --> 00:00:56,770 So we have here engy after content in it and we have here engy after viewing it. 14 00:00:56,770 --> 00:01:02,200 At this point, the only life-cycle hook that is missing from being implemented in this component is 15 00:01:02,200 --> 00:01:02,830 engy. 16 00:01:02,830 --> 00:01:05,900 Do check that we have covered earlier in the course. 17 00:01:05,920 --> 00:01:10,170 So let's quickly implement here that engie do shake, life-cycle, hook. 18 00:01:10,180 --> 00:01:14,020 Let's now reload our application and see on the console. 19 00:01:14,020 --> 00:01:17,380 In which sequence are these hooks called by the framework. 20 00:01:17,470 --> 00:01:20,210 Let's open here to the console and let's have a look. 21 00:01:20,230 --> 00:01:25,210 So if we start at the beginning, we're going to see that indeed the first thing that gets called into 22 00:01:25,210 --> 00:01:27,880 the constructor to build the course guard component. 23 00:01:27,970 --> 00:01:31,840 And then we have our first call to engy on changes. 24 00:01:32,020 --> 00:01:37,660 This means that the input properties of this component have already been filled in at this stage. 25 00:01:37,660 --> 00:01:44,320 And we notified here the components in this lifecycle callback that the input properties of the component 26 00:01:44,320 --> 00:01:46,060 have already been filled in. 27 00:01:46,180 --> 00:01:48,690 Next, we are going to call Engie Unended. 28 00:01:48,730 --> 00:01:53,380 This will give the component an opportunity to perform any initialization logic. 29 00:01:53,380 --> 00:01:59,470 And we have the guarantee that these life-cycle hook engy only needs is only going to be called once 30 00:01:59,470 --> 00:02:00,430 by the framework. 31 00:02:00,430 --> 00:02:07,240 Unlike Hengdian changes after these ANGULAR is going to run the change detection mechanism in order 32 00:02:07,240 --> 00:02:09,910 to determine if any changes have occurred. 33 00:02:09,919 --> 00:02:13,010 So we are going to see here a call to engie do check. 34 00:02:13,030 --> 00:02:18,670 So here is the best place to implement any custom change detection logic that we might need this to 35 00:02:18,730 --> 00:02:20,860 occur only in rare occasions. 36 00:02:20,860 --> 00:02:24,400 But if we need it, this is the correct lifecycle hook to call. 37 00:02:24,520 --> 00:02:28,910 After that, ANGULAR is going to initialize the content part of the components. 38 00:02:28,930 --> 00:02:35,740 So if you are doing here any content child or content children queries at the level of our component, 39 00:02:35,740 --> 00:02:42,100 these is the best place to put any initialization logic that might need variables that are populated 40 00:02:42,100 --> 00:02:46,120 using content, shell or content children in a similar way. 41 00:02:46,130 --> 00:02:52,900 If we do any queries in our component to the template itself, using, for example, the at Vue child 42 00:02:52,900 --> 00:02:58,130 decorator, then an initialization logic that needs the variables populated by view. 43 00:02:58,150 --> 00:03:01,870 Child should be put here in engy after viewing it. 44 00:03:01,900 --> 00:03:09,670 So these init methods, the NGO only after content and after viewing it are each only going to be called 45 00:03:09,670 --> 00:03:17,710 once during the whole lifecycle of the components and in this order first and only next after content 46 00:03:17,710 --> 00:03:20,550 in it and finally after viewing it. 47 00:03:20,590 --> 00:03:23,770 So these are initialization methods only called once. 48 00:03:24,010 --> 00:03:30,140 Next, we have the methods that are called every time that there is a change detection run in our application. 49 00:03:30,160 --> 00:03:35,400 So, for example, if we clear here our console and we click here the edit course button, we don't 50 00:03:35,400 --> 00:03:35,860 want to see that. 51 00:03:35,860 --> 00:03:38,650 We have here a call to engy on changes. 52 00:03:38,650 --> 00:03:44,440 So Engy on changes is going to be called once the first time that we populate the properties of our 53 00:03:44,440 --> 00:03:45,040 component. 54 00:03:45,040 --> 00:03:51,050 But it's also going to be called any other time when the input of our component changes. 55 00:03:51,100 --> 00:03:57,280 So this is a great place to put our logic that is going to do some calculation comparing the previous 56 00:03:57,280 --> 00:04:01,090 value of our input property with the new value. 57 00:04:01,240 --> 00:04:06,730 After that, we have to check used for custom change detection if necessary. 58 00:04:06,800 --> 00:04:08,860 After that, we have the two methods. 59 00:04:08,860 --> 00:04:11,590 After constant checks and after vukic. 60 00:04:11,800 --> 00:04:17,050 These are going to be called every time that change detection runs after constant check is going to 61 00:04:17,050 --> 00:04:18,910 be called after the content. 62 00:04:18,910 --> 00:04:22,400 Part of the component has been checked for any changes. 63 00:04:22,420 --> 00:04:27,700 So if we open here our application component, this is the part of the component that we are talking 64 00:04:27,700 --> 00:04:33,550 about, the content path here between the open tag and the close tag of the component installs. 65 00:04:33,580 --> 00:04:38,920 Angular is going to check here, for example, this property course that I couldn't Eurail to see if 66 00:04:38,920 --> 00:04:44,470 this is changed since the last run of change detection or even if this component is running with on 67 00:04:44,470 --> 00:04:50,470 push, ANGULAR is going to check if the source input property has changed since last time. 68 00:04:50,470 --> 00:04:56,230 After this check is then ANGULAR is going to run the after content check lifecycle hook. 69 00:04:56,230 --> 00:05:00,370 These Life-cycle Hook is a great place for doing any modifications. 70 00:05:00,530 --> 00:05:06,500 The data that we need last second before The View gets completely rendered, notice that there is one 71 00:05:06,500 --> 00:05:07,160 limitation. 72 00:05:07,160 --> 00:05:13,640 We cannot modify anything that would change the results of the checks that were done here at the level 73 00:05:13,640 --> 00:05:14,730 of the content path. 74 00:05:14,750 --> 00:05:20,330 So, for example, if we would modify this property, these Life-cycle, who would throw in there because 75 00:05:20,330 --> 00:05:26,720 we are modifying the content of something that was already checked so angular will not know which value 76 00:05:26,720 --> 00:05:31,020 to display the value before the check or the value after the check. 77 00:05:31,040 --> 00:05:33,770 So we would get an error at least in development mode. 78 00:05:33,950 --> 00:05:37,310 Now the last Life-cycle Husky's after view check. 79 00:05:37,310 --> 00:05:43,400 So this is a great place for doing any dumb direct manipulation operations, such as, for example, 80 00:05:43,400 --> 00:05:49,940 setting the focus on a new element that was introduced by the latest data or scrolling to the bottom 81 00:05:49,940 --> 00:05:54,070 of a list of new elements that were just added to the page. 82 00:05:54,080 --> 00:05:56,360 The last Life-cycle hook is engy. 83 00:05:56,360 --> 00:06:01,780 On this drawing, NGO destroys going to be called whenever the component instance gets destroyed. 84 00:06:01,850 --> 00:06:04,550 It's the opposite of engy on init. 85 00:06:04,550 --> 00:06:11,250 Usually we use it to release any resources that the component might hold during its lifetime. 86 00:06:11,390 --> 00:06:17,240 Notice that if you are using Engy on this, try to unsubscribe from any observables that the component 87 00:06:17,240 --> 00:06:17,810 is using. 88 00:06:17,810 --> 00:06:20,180 That is probably not the correct approach. 89 00:06:20,210 --> 00:06:26,420 It's better in those cases to use the angular async pipe that is going to take care automatically of 90 00:06:26,420 --> 00:06:29,980 unsubscribing from any observable past to the template. 91 00:06:30,110 --> 00:06:34,960 So to summarize, most components that you will implement will use NGO in it. 92 00:06:35,000 --> 00:06:40,340 This is the component initialization method and here is where we should put initialization logic and 93 00:06:40,340 --> 00:06:41,810 not on the constructor. 94 00:06:41,990 --> 00:06:48,080 Rarely we will need to use energy on changes, but if we need it, we know how to detect a change in 95 00:06:48,080 --> 00:06:48,590 an input. 96 00:06:48,590 --> 00:06:52,160 Property after content in it will always be necessary. 97 00:06:52,310 --> 00:06:58,370 If you are doing content projection and you need programmatic references to projected content here at 98 00:06:58,370 --> 00:07:01,550 the level of your component, you might not need this. 99 00:07:01,550 --> 00:07:07,400 If you are just using the energy content tag and you are not programmatically accessing any protected 100 00:07:07,400 --> 00:07:08,030 content. 101 00:07:08,030 --> 00:07:13,400 And after viewing it is for when we are using the view, our view children decorator's. 102 00:07:13,490 --> 00:07:17,480 This is the point in time where we are sure those queries have been filled in. 103 00:07:17,480 --> 00:07:21,700 So any initialization logic that depends on those queries should go here. 104 00:07:21,800 --> 00:07:27,380 These two lifecycle hooke's content checked and rechecked should be very rarely needed. 105 00:07:27,380 --> 00:07:34,550 And any logic that we run here should avoid expensive calculations in order not to slow down our application. 106 00:07:34,700 --> 00:07:37,100 If we need to do custom change detection. 107 00:07:37,100 --> 00:07:40,700 Engy to check is a great place for adding that logic. 108 00:07:40,880 --> 00:07:46,970 And with this, we have completed our coverage of all the angular lifecycle hooks that are available 109 00:07:47,090 --> 00:07:47,660 next. 110 00:07:47,660 --> 00:07:53,390 What we are going to do is we are going to do a deep dive on angular modules, how to create the feature 111 00:07:53,390 --> 00:07:53,990 module. 112 00:07:54,020 --> 00:07:56,020 What are the benefits of modules? 113 00:07:56,180 --> 00:07:58,640 This is coming right up in the next section.