1 00:00:03,940 --> 00:00:08,800 Hello, everyone, and welcome back in this new section of the course, we're going to talk about the 2 00:00:08,800 --> 00:00:13,690 angular component life cycle hooks in order to create here a simple example. 3 00:00:13,810 --> 00:00:16,780 Let's create here at least with only one card. 4 00:00:16,820 --> 00:00:19,750 We're going to head over here to our application component. 5 00:00:19,750 --> 00:00:24,850 And instead of loading here, the data from the back end, let's just go ahead and assign here these 6 00:00:24,850 --> 00:00:28,720 value the courses array, which is available here in this file. 7 00:00:28,750 --> 00:00:34,240 So this is just a plain JavaScript array that we are passing directly here to our view. 8 00:00:34,300 --> 00:00:38,620 So now if you reload, we are going to have here the same data as before. 9 00:00:38,620 --> 00:00:43,720 But this time around, we are bringing the data directly from this file and not from the back end. 10 00:00:43,720 --> 00:00:50,260 Instead of iterating here through a list of courses, let's instead create here only one course we are 11 00:00:50,260 --> 00:00:52,410 going to define here a variable course. 12 00:00:52,420 --> 00:00:57,920 Let's for that use the NGF notation and we're going to access the courses array. 13 00:00:58,070 --> 00:01:03,220 We're going to take the first position of the array and we are going to allow this these into the course 14 00:01:03,280 --> 00:01:04,370 template variable. 15 00:01:04,450 --> 00:01:08,530 So if we try this out, we're going to see that now we only have one card. 16 00:01:08,550 --> 00:01:14,140 So let's now see how does the component lifecycle hooks of the course card component work? 17 00:01:14,290 --> 00:01:19,360 Right now we are already implementing here our first lifecycle hook that we are going to cover, which 18 00:01:19,360 --> 00:01:22,210 is the engy undenied lifecycle hook. 19 00:01:22,210 --> 00:01:29,200 These methods engie only needs like all angular lifecycle hooks is not meant for us to call it directly 20 00:01:29,200 --> 00:01:30,780 in our application code. 21 00:01:30,790 --> 00:01:36,520 So let's say that we will have some functionality that we would like to call somewhere else here on 22 00:01:36,520 --> 00:01:39,810 the application by calling these dot engy only need. 23 00:01:39,970 --> 00:01:41,290 We should not do this. 24 00:01:41,290 --> 00:01:44,020 We should not call the lifecycle hooks directly. 25 00:01:44,070 --> 00:01:50,690 These methods are meant to be called by the angular framework only and not by application code. 26 00:01:50,830 --> 00:01:58,080 So then how does this method exactly work and when does the framework call this method and why not? 27 00:01:58,130 --> 00:02:03,250 To understand how this works, let's bring here to the console some logging so that we know whenever 28 00:02:03,250 --> 00:02:04,460 the method gets cold. 29 00:02:04,480 --> 00:02:09,370 So if we refresh here, our application, we're going to head over here to the console and we're going 30 00:02:09,370 --> 00:02:13,060 to see that this method is only getting cold once. 31 00:02:13,070 --> 00:02:19,600 So as we interact further with the components, as we create here a new title for the course, we are 32 00:02:19,600 --> 00:02:24,610 going to see that even though there are events getting fired and getting handled by ANGULAR, you'll 33 00:02:24,610 --> 00:02:27,520 see that this method was only called once. 34 00:02:27,550 --> 00:02:30,640 Let's not talk about why this method exists. 35 00:02:30,670 --> 00:02:36,280 So if we add here another logging statement, but this time at the level of the constructor, we are 36 00:02:36,280 --> 00:02:41,400 going to see that the constructor is going to get called before and geon in it. 37 00:02:41,410 --> 00:02:42,510 So let's refresh here. 38 00:02:42,520 --> 00:02:43,300 The application. 39 00:02:43,300 --> 00:02:49,340 We can see that the constructor gets called first and only then engy on need, as one would expect. 40 00:02:49,360 --> 00:02:54,360 So both are initialization methods that are called whenever the class gets created. 41 00:02:54,430 --> 00:02:58,150 But the question here is what is the difference between the two methods? 42 00:02:58,150 --> 00:03:03,250 And in order to understand this, let's look here, for example, the value of the course. 43 00:03:03,250 --> 00:03:09,130 Let's log the course here in the console and let's log it also here on Engie on it. 44 00:03:09,250 --> 00:03:14,890 Now, if we reload our application, we are going to see that the course is getting called after the 45 00:03:14,890 --> 00:03:15,500 reload. 46 00:03:15,520 --> 00:03:20,860 We are going to see that whenever the constructor got called, we get here the value undefined, meaning 47 00:03:20,860 --> 00:03:25,120 that the course member variable was not yet defined at construction time. 48 00:03:25,120 --> 00:03:30,010 But whenever we called engy on init, we already have here some data. 49 00:03:30,020 --> 00:03:33,510 So that is the main difference between both methods. 50 00:03:33,610 --> 00:03:37,870 Now we can understand a bit better the need for an NGO on init method. 51 00:03:37,870 --> 00:03:44,350 Whenever the ANGULAR is creating the component, it needs to first call the constructor on it and pass 52 00:03:44,350 --> 00:03:46,120 the constructor dependencies. 53 00:03:46,130 --> 00:03:52,090 But at this moment in time there is no way for ANGULAR to populate here the input member variables. 54 00:03:52,090 --> 00:03:58,030 What ANGULAR does is it finishes calling the constructor and only after that ANGULAR is going to start 55 00:03:58,030 --> 00:04:00,750 to fill in here the component inputs. 56 00:04:00,790 --> 00:04:07,690 So if we want to create some initialization logic that depends on the presence of this input data, 57 00:04:07,690 --> 00:04:12,670 then for that we need to use Engy undenied and not the constructor in general. 58 00:04:12,670 --> 00:04:15,860 The constructor should not contain any logic at all. 59 00:04:15,880 --> 00:04:21,760 The only thing that we should be doing in the constructor of Angular component is to take the dependencies 60 00:04:21,760 --> 00:04:24,550 and save them in member variables. 61 00:04:24,550 --> 00:04:30,460 Noticed that with engy only need, we have no guarantee that the data is going to be available whenever 62 00:04:30,460 --> 00:04:32,490 angular calls the first time. 63 00:04:32,500 --> 00:04:39,010 So this only happened here in this particular example because we are passing here to the curve component, 64 00:04:39,010 --> 00:04:44,830 a variable that is coming here from our application component array and this data is already filled 65 00:04:44,830 --> 00:04:46,810 in here directly from the start. 66 00:04:46,930 --> 00:04:53,260 So if the data would be injected here into the crosscourt asynchronously, such as if the data would 67 00:04:53,260 --> 00:04:59,120 come from the back, for example, then the data would not be present here on Engy Unended. 68 00:04:59,140 --> 00:05:00,250 So in summary. 69 00:05:00,370 --> 00:05:06,670 If your component has any initialization logic, the correct place to put that logic is the engie only 70 00:05:06,670 --> 00:05:12,640 need method in general, the same way that we have a life cycle hook for whenever the component gets 71 00:05:12,640 --> 00:05:13,250 created. 72 00:05:13,270 --> 00:05:18,680 We also have another life cycle hook that gets called whenever the component gets destroyed. 73 00:05:18,700 --> 00:05:24,310 So in order to implement these life cycle hook, we are going to implement here the on destroy interface. 74 00:05:24,310 --> 00:05:28,820 And this interface contains the engie on destroy method. 75 00:05:28,840 --> 00:05:34,150 So this life cycle hook is going to get cold whenever the component gets destroyed. 76 00:05:34,330 --> 00:05:40,630 The energy on destroying methods is a great place for releasing any resources that the component might 77 00:05:40,630 --> 00:05:45,940 be using, such as, for example, long running observables that are fetching data from a real time 78 00:05:45,940 --> 00:05:46,580 database. 79 00:05:46,630 --> 00:05:51,340 This is the right place to unsubscribe from all those open connections. 80 00:05:51,340 --> 00:05:56,230 So let's add here some logging so that we can see the lifecycle hook in action. 81 00:05:56,380 --> 00:06:02,260 In order to trigger these lifecycle hook, we are going to switch over here to our application component 82 00:06:02,260 --> 00:06:05,970 and we're going to trigger the destruction of the earth component. 83 00:06:05,980 --> 00:06:11,500 Let's say, for example, that whenever we click on this button, we are going to clear here the causes 84 00:06:11,500 --> 00:06:15,390 array and that is going to trigger the destruction of the component. 85 00:06:15,550 --> 00:06:20,040 In order to implement that, let's switch over here to the on a course method. 86 00:06:20,050 --> 00:06:26,110 And here we are going to assign to the causes, array and array that contains one element, what we 87 00:06:26,110 --> 00:06:28,320 are going to make that elements and define. 88 00:06:28,330 --> 00:06:33,970 So whenever we axis here, the value using this expression, this is going to be evaluated to false 89 00:06:33,970 --> 00:06:38,120 and NGF is going to hide the component and therefore destroy it. 90 00:06:38,170 --> 00:06:39,550 So let's try this out. 91 00:06:39,550 --> 00:06:41,430 We are going to refresh the application. 92 00:06:41,440 --> 00:06:43,510 Let's open here our console. 93 00:06:43,510 --> 00:06:44,890 We're going to clear everything. 94 00:06:44,890 --> 00:06:49,000 So just like before the constructor gets called and then engy on init. 95 00:06:49,000 --> 00:06:55,030 But now if we click on edit course, we are going to see that the component disappears from the screen 96 00:06:55,030 --> 00:07:01,660 and that we have called here the engie on Destroy Life-cycle Hook, a very common use case for this 97 00:07:01,660 --> 00:07:02,590 life-cycle hook. 98 00:07:02,590 --> 00:07:09,340 Hooking on destroy is using it to unsubscribe from any observables that the component was consuming. 99 00:07:09,490 --> 00:07:16,090 In general, this is best avoided by using the async pipe and passing the observable to the component 100 00:07:16,090 --> 00:07:18,400 directly like we have seen before. 101 00:07:18,590 --> 00:07:24,640 This way, whenever the component gets destroyed, the async pipe will also take care of unsubscribing 102 00:07:24,640 --> 00:07:25,760 from the observable. 103 00:07:25,780 --> 00:07:32,560 So this way we don't have to manually handle subscriptions in our components and release them in engy 104 00:07:32,560 --> 00:07:33,400 on destroy. 105 00:07:33,610 --> 00:07:40,060 These means that the energy undestroyed lifecycle hook should be very rarely needed in practice. 106 00:07:40,210 --> 00:07:46,470 Most of the time we are going to be using engy only need, but very rarely will we need engie on this 107 00:07:46,480 --> 00:07:46,900 dreux. 108 00:07:46,900 --> 00:07:51,670 Let's now continue to explore the multiple lifecycle hooks that we have available. 109 00:07:51,670 --> 00:07:55,210 We are now going to cover the on changes lifecycle hook.