1 00:00:04,180 --> 00:00:06,320 Hello, everyone, and welcome back. 2 00:00:06,610 --> 00:00:12,380 In this lesson, we're going to cover a series of dependency injection related angular decorator's. 3 00:00:12,490 --> 00:00:15,530 Let's start with the first one, the optional decorator. 4 00:00:15,700 --> 00:00:22,360 So as we have seen before, if we are requesting here a dependency in our application, but somehow 5 00:00:22,360 --> 00:00:27,430 the dependency is not available, we will get an A. Let's reproduce the air. 6 00:00:27,430 --> 00:00:30,100 We are going to switch here to our curtsies service. 7 00:00:30,100 --> 00:00:34,630 And we are going to remove from here the definition of our three shaquill provider. 8 00:00:34,750 --> 00:00:41,590 So what we have here is a class that is not plugged into the dependency injection system that is being 9 00:00:41,590 --> 00:00:46,180 requested here, for example, and also in the course Kerith component. 10 00:00:46,300 --> 00:00:51,390 If we try this out, we are going to see that now the program does not work anymore. 11 00:00:51,400 --> 00:00:56,170 And if we check here the error message, we have the same error message as before. 12 00:00:56,320 --> 00:00:58,900 No provider for course is service. 13 00:00:58,930 --> 00:01:04,360 The reason why this message shows in the console is because whenever Engler sees here a dependency in 14 00:01:04,360 --> 00:01:07,960 the constructor, it assumes that it's amendatory dependency. 15 00:01:07,970 --> 00:01:12,580 So if the dependency is not present, the program should crash in that moment. 16 00:01:12,640 --> 00:01:19,600 There is an alternative to this, which is to market our dependency as being optional by using the angular, 17 00:01:19,600 --> 00:01:21,040 optional decorator. 18 00:01:21,160 --> 00:01:27,520 So if we apply here the optional decorator at the level of the course card component, but also here 19 00:01:27,520 --> 00:01:34,450 at the level of our application component where we are requesting the same dependency this time around, 20 00:01:34,450 --> 00:01:38,980 our program would not crash as early in the bootstrap process. 21 00:01:38,990 --> 00:01:41,790 So we have here a running application with a top menu. 22 00:01:42,100 --> 00:01:47,560 But notice that we now get a different error, cannot remove property load courses of null. 23 00:01:47,590 --> 00:01:51,430 And as we can see, the problem comes here from our application components. 24 00:01:51,430 --> 00:01:56,160 So we are calling here lower the courses in a property that is undefined. 25 00:01:56,170 --> 00:02:01,980 So whenever we mark this dependency as optional, what will happen is that the program will not crash. 26 00:02:01,990 --> 00:02:08,600 But we need to guard in our application against the case when the dependency is not defined. 27 00:02:08,650 --> 00:02:11,120 So this covers the optional decorator. 28 00:02:11,140 --> 00:02:17,690 Let's quickly fix our program before continuing to present a few other dependency injection decorators. 29 00:02:17,710 --> 00:02:23,260 We are going to remove the optional decorator and we are going to put back here to the configuration 30 00:02:23,350 --> 00:02:25,840 of our three Shakiba provider. 31 00:02:25,960 --> 00:02:29,000 Let's not talk about the self decorator. 32 00:02:29,110 --> 00:02:33,280 So if you remember, our dependency injection system is erratic. 33 00:02:33,640 --> 00:02:39,910 If, for example, we remove here the configuration of our clickable provider and we go back to the 34 00:02:39,910 --> 00:02:47,740 previous system where we were creating here multiple copies of our courses service via the provider's 35 00:02:47,740 --> 00:02:55,000 property of the component class, we're going to fall in a situation when sometimes the self the might 36 00:02:55,000 --> 00:02:55,630 be useful. 37 00:02:55,660 --> 00:03:03,430 So in this new setup, our application is still working and we only have one instance existing of the 38 00:03:03,430 --> 00:03:04,630 courses service. 39 00:03:04,810 --> 00:03:10,090 That's the instance that is created here at the level of the application component. 40 00:03:10,090 --> 00:03:14,480 And we don't have here any instances at the level of each course. 41 00:03:15,100 --> 00:03:18,350 As we can see, each course, Carol, is getting injected here. 42 00:03:18,370 --> 00:03:25,780 Our courses service and due to the way that the Iraqi dependency injection system works, these dependency 43 00:03:25,780 --> 00:03:30,990 here is coming not from the component, but from the parent component. 44 00:03:31,020 --> 00:03:38,560 So we have here a same instance of a service that is shared through the component and its child components 45 00:03:38,560 --> 00:03:42,110 via hierarchical dependency injection in certain cases. 46 00:03:42,130 --> 00:03:43,670 This might not be intended. 47 00:03:43,780 --> 00:03:50,500 Sometimes you have a local copy here of a service that you want to be sure that it's private to this 48 00:03:50,500 --> 00:03:55,160 component and that it has not been accidentally injected from somewhere else. 49 00:03:55,330 --> 00:04:02,200 So in that case, we want to override the default behavior of the Iraqi called dependency injection 50 00:04:02,200 --> 00:04:09,220 system, and we want to ensure that this instance really belongs only to this component in order to 51 00:04:09,220 --> 00:04:14,810 ensure that we are going to adhere to a new decorator, which is called the self decorator. 52 00:04:14,980 --> 00:04:19,200 These decorator overrides the default behavior of dependency injection. 53 00:04:19,329 --> 00:04:24,750 These dependency will no longer come from a parent component for sure. 54 00:04:24,760 --> 00:04:30,550 This dependency here, if it exists, it can only come from the component itself. 55 00:04:30,580 --> 00:04:34,930 Let's try these out because this component does not have a private instance. 56 00:04:34,930 --> 00:04:38,770 Of course, this service, we are going to get here again and there. 57 00:04:38,770 --> 00:04:43,870 And if we have a look at the error message we have here, no provider for courses service. 58 00:04:43,870 --> 00:04:48,910 So it's the same message as before, but it's being caused by a different reason. 59 00:04:49,030 --> 00:04:51,600 It's because of the presence of the self-liquidating. 60 00:04:51,760 --> 00:04:58,160 In order to make this program work again, we all have to add here a private instance of the course, 61 00:04:58,160 --> 00:05:00,130 this service injectable. 62 00:05:00,320 --> 00:05:01,910 Otherwise, this will not work. 63 00:05:01,940 --> 00:05:07,810 So if we ever hear this provider configuration, I can see that now our application is working again 64 00:05:08,000 --> 00:05:14,720 now, the same way that we want to override the default injection behavior and make sure that the dependency 65 00:05:14,750 --> 00:05:16,390 is local to the component. 66 00:05:16,430 --> 00:05:23,480 We might want to do the opposite, which is we might want to make sure that there is not a private copy 67 00:05:23,480 --> 00:05:24,410 of this component. 68 00:05:24,410 --> 00:05:30,980 We might want to be sure that this dependency chems for sure from parent components and not from the 69 00:05:30,980 --> 00:05:32,060 current component. 70 00:05:32,150 --> 00:05:36,380 So in order to do that, we will use the Skype self decorated. 71 00:05:36,500 --> 00:05:42,770 These decorator overrides the default behavior of dependency injection in a different way this time 72 00:05:42,770 --> 00:05:49,220 around the course, this service instance will not be searched using our local provider. 73 00:05:49,240 --> 00:05:57,200 So this provider here is ignored and our dependency injection system is going to try to fetch the service 74 00:05:57,200 --> 00:05:59,060 from the parent component. 75 00:05:59,090 --> 00:06:05,630 So if we try this out, we are going to see that our program is still working correctly and noticed 76 00:06:05,630 --> 00:06:12,170 that these courses, service instance here is not coming here from these local providers in order to 77 00:06:12,170 --> 00:06:16,420 prove that the service is not coming from these local provider. 78 00:06:16,430 --> 00:06:22,810 Let's go here to our application component and let's remove these application component provider. 79 00:06:22,850 --> 00:06:29,060 So this provider from the parent component was the provider that was giving the course, this service 80 00:06:29,060 --> 00:06:32,310 instance, to the course care, the child components. 81 00:06:32,360 --> 00:06:37,100 This one here will not work due to the Skype self decorator's. 82 00:06:37,100 --> 00:06:41,420 So if we try this out, we're going to see that we fall again into an error situation. 83 00:06:41,450 --> 00:06:43,480 Let's quickly inspect, hear the message. 84 00:06:43,490 --> 00:06:50,480 So as expected, we have the message no provider for coarsest service, although we have here a local 85 00:06:50,480 --> 00:06:51,170 provider. 86 00:06:51,170 --> 00:06:57,530 We can see that due to the use of Skype self, these local provider is not being taken into account. 87 00:06:57,560 --> 00:07:03,980 So if we remove here the Skype self annotation, we are going to see that the program is still not working. 88 00:07:03,980 --> 00:07:06,810 But now it's for a different reason. 89 00:07:06,830 --> 00:07:12,980 What's happening here is that here at the level of the application component, we are not receiving 90 00:07:12,980 --> 00:07:15,050 here any coarsest service. 91 00:07:15,050 --> 00:07:21,470 The courses service that we have defined here is only visible at the level of the card component and 92 00:07:21,470 --> 00:07:24,300 not at the level of the application component. 93 00:07:24,320 --> 00:07:30,800 So in order to fix this error, we will have to add here another provider which is visible at the level 94 00:07:30,800 --> 00:07:31,760 of this component. 95 00:07:31,760 --> 00:07:35,840 And with this in place, our application is working again as expected. 96 00:07:36,200 --> 00:07:39,980 Let's quickly summarize everything that we have learned in this lesson. 97 00:07:40,160 --> 00:07:46,040 So the optional decorator is meant for situations where we are not sure if a dependency is going to 98 00:07:46,040 --> 00:07:46,810 be provided. 99 00:07:46,970 --> 00:07:53,270 That way, we can mark the dependency as optional and then we have to handle programmatically the cases 100 00:07:53,270 --> 00:07:55,430 where the dependency is undefined. 101 00:07:55,430 --> 00:07:56,530 In our code. 102 00:07:56,540 --> 00:08:02,510 As we have mentioned before, the angular dependency injection system is hierarchical and it has a default 103 00:08:02,510 --> 00:08:06,590 behavior that works correctly in most situations. 104 00:08:06,620 --> 00:08:12,560 There are special use cases where we would like to override the default behavior of the dependency injection 105 00:08:12,560 --> 00:08:13,100 system. 106 00:08:13,100 --> 00:08:18,470 If you want to make sure that we receive dependencies that are created locally at the level of the component, 107 00:08:18,560 --> 00:08:20,900 we should use the self decorator. 108 00:08:21,050 --> 00:08:26,840 If, on the other hand, we want to make sure that we don't receive dependency created locally, but 109 00:08:26,840 --> 00:08:34,190 instead we always get them from parent components, then in that case we should use the Skype self decorator. 110 00:08:34,460 --> 00:08:41,030 These dependency injection decorators should only be rarely needed because in most cases the default 111 00:08:41,030 --> 00:08:45,160 behavior of the dependency injection system is exactly what we need. 112 00:08:45,350 --> 00:08:51,030 Let's now introduce one less dependency injection decorator and then we are going to conclude that the 113 00:08:51,030 --> 00:08:56,480 dependency injection section of this course, after this section, we are going to start a deep dive 114 00:08:56,480 --> 00:08:59,090 on the angular change detection mechanism. 115 00:08:59,090 --> 00:09:04,730 We are going to learn about custom change detection, unpunched change detection and much more.