1 00:00:00,120 --> 00:00:05,460 In this lecture, we will fix the memory leak in our app by unregister during the motile. 2 00:00:05,700 --> 00:00:07,770 It's going to be simpler than you think. 3 00:00:08,039 --> 00:00:11,670 We will start by working inside the mobile service file. 4 00:00:14,150 --> 00:00:20,600 Below the register function, we will define a function called unregister with one parameter called 5 00:00:20,600 --> 00:00:20,930 ID. 6 00:00:23,260 --> 00:00:26,800 The type of the I.D. parameter will be string. 7 00:00:27,190 --> 00:00:31,570 The purpose of this function is to remove a model with the associated ID. 8 00:00:32,229 --> 00:00:34,810 There are a couple of ways we can go about this. 9 00:00:35,110 --> 00:00:38,980 Either way, we will need to loop through the array of models. 10 00:00:39,280 --> 00:00:44,020 I think the easiest way of removing the model is by using the filter function. 11 00:00:44,320 --> 00:00:47,110 We will call this function on the model's array. 12 00:00:49,740 --> 00:00:54,600 The filter function will return a new array based on the array it was called on. 13 00:00:54,960 --> 00:00:58,530 We can pass in a function to filter the elements in the array. 14 00:00:58,890 --> 00:01:02,490 The function must return a Boolean value if we return. 15 00:01:02,490 --> 00:01:05,760 True, the element will be added to the new array. 16 00:01:06,210 --> 00:01:08,310 Otherwise, it will be excluded. 17 00:01:08,550 --> 00:01:10,530 Let's pass it an arrow function. 18 00:01:13,100 --> 00:01:18,080 We will reference each item in the array as element inside the function. 19 00:01:18,110 --> 00:01:22,820 We will compare the elements Don ID property to the ID argument. 20 00:01:23,150 --> 00:01:25,820 We want to check if they're not equal to each other. 21 00:01:28,460 --> 00:01:32,750 As long as the IDs don't match, the model will be added to the array. 22 00:01:33,110 --> 00:01:36,170 If there is a match, it'll be excluded from the array. 23 00:01:36,560 --> 00:01:39,500 This solution should remove the model from our array. 24 00:01:39,830 --> 00:01:45,110 We can move on to the next step, which is to call this function when the model is destroyed. 25 00:01:45,560 --> 00:01:49,100 Open the authentication model component class file. 26 00:01:51,640 --> 00:01:55,150 The authentication modal component registers the modal. 27 00:01:55,480 --> 00:02:00,190 It makes sense to unregister the model when the component gets destroyed. 28 00:02:00,550 --> 00:02:07,420 We can use lifecycle hooks to help us detect when the component is destroyed before the component gets 29 00:02:07,420 --> 00:02:08,139 destroyed. 30 00:02:08,350 --> 00:02:10,690 We will call the unregister function. 31 00:02:11,110 --> 00:02:14,350 The service is already injected into the component. 32 00:02:14,680 --> 00:02:17,860 We can move on to defining the lifecycle function. 33 00:02:18,760 --> 00:02:24,920 First, we should implement the interface for type safety after the on init interface. 34 00:02:24,940 --> 00:02:27,880 We will anthee on destroy interface. 35 00:02:30,510 --> 00:02:37,260 Adding the implementation of imported beyond destroy interface from the angular core package. 36 00:02:37,680 --> 00:02:42,120 Be sure to add it to the import statement if it wasn't automatically added. 37 00:02:42,510 --> 00:02:46,620 Moving on, we will define the energy on destroyer function. 38 00:02:49,210 --> 00:02:55,030 Inside this function, we all call the this model dot unregister function. 39 00:02:55,420 --> 00:02:58,210 The ID of the model is authentication. 40 00:03:00,790 --> 00:03:04,480 With those changes in place, the memories should have been fixed. 41 00:03:04,750 --> 00:03:06,940 Let's check out the app in the browser. 42 00:03:09,520 --> 00:03:15,790 Inside the developer tools, the council will continue to output the models away from our service. 43 00:03:16,060 --> 00:03:22,360 If we look closely, we won't see duplicate models whenever the model is added back to the document. 44 00:03:22,720 --> 00:03:25,690 The array is empty after the model is removed. 45 00:03:26,020 --> 00:03:27,850 This is exactly what we wanted. 46 00:03:28,210 --> 00:03:32,380 The browser doesn't have to care about a model that isn't in the document. 47 00:03:32,890 --> 00:03:35,470 We fixed a memory leak in our program. 48 00:03:35,740 --> 00:03:39,370 We should always consider how data is created in your app. 49 00:03:39,760 --> 00:03:46,480 If you create data inside a component, the data will take up memory until the component is destroyed. 50 00:03:46,900 --> 00:03:53,710 However, if we have a service, data and a service will persist, we should responsibly manage the 51 00:03:53,710 --> 00:03:57,250 data in a service before I end this lecture. 52 00:03:57,430 --> 00:04:01,000 I'm going to undo the changes we made to the components. 53 00:04:01,270 --> 00:04:03,790 Open the app component class file. 54 00:04:06,300 --> 00:04:08,100 We will empty out the class. 55 00:04:13,600 --> 00:04:18,490 Next, we will remove the import statement for the modal service object. 56 00:04:21,000 --> 00:04:23,850 Afterward, open the app template file. 57 00:04:26,440 --> 00:04:30,580 We can safely remove the NGF if directive from the components. 58 00:04:33,020 --> 00:04:34,940 Intermodal service file. 59 00:04:34,970 --> 00:04:39,230 We will change the access of the motels property back to private. 60 00:04:41,740 --> 00:04:45,910 In the next lecture, we will make one more improvement to our model.