1 00:00:04,550 --> 00:00:06,710 Hello, everyone, and welcome back. 2 00:00:06,920 --> 00:00:11,070 In this lesson, we are going to cover the host dependency injection decorated. 3 00:00:11,300 --> 00:00:16,630 This is the conclusion of the dependency injection section, the host dependency injection. 4 00:00:16,640 --> 00:00:22,640 The character is useful whenever we have a directive in our application that we are applying to one 5 00:00:22,640 --> 00:00:23,650 of the components. 6 00:00:23,840 --> 00:00:29,600 Let's take, for example, here the Coast Guard component and let's apply it to the highlighted directive 7 00:00:29,600 --> 00:00:30,950 that we have built before. 8 00:00:31,190 --> 00:00:35,630 So if you remember, this directive is going to make our course cards highlighted. 9 00:00:35,760 --> 00:00:41,910 So we find now hover over one of these cards we see here, these red border highlighting the card. 10 00:00:42,140 --> 00:00:47,630 If we have a look here at the implementation of the highlighted directive, we see that it also has 11 00:00:47,630 --> 00:00:48,560 a constructor. 12 00:00:48,680 --> 00:00:55,310 So just like the case of a component, we might also want to inject here a dependency so that the directive 13 00:00:55,310 --> 00:00:56,070 can use it. 14 00:00:56,180 --> 00:00:59,810 We could inject here, for example, the courses service. 15 00:00:59,990 --> 00:01:01,160 So let's do that. 16 00:01:01,160 --> 00:01:06,650 We are going to copy here this member variable to the constructor and we're going to bring it out here 17 00:01:06,650 --> 00:01:07,490 to the console. 18 00:01:07,730 --> 00:01:11,460 What is the instance, of course, this service that we are injecting. 19 00:01:11,480 --> 00:01:17,480 So let's have here, because this service highlighted the directive and we are going to concatenate 20 00:01:17,480 --> 00:01:21,320 here the identifier of the ejected service. 21 00:01:21,530 --> 00:01:27,770 Now, let's see what will happen in the most common scenario where our course card component does not 22 00:01:27,770 --> 00:01:29,330 have its own provider. 23 00:01:29,360 --> 00:01:33,740 So only the application component here has a provider for this service. 24 00:01:33,750 --> 00:01:38,900 So there will be only one global instance of this service in the whole application. 25 00:01:38,910 --> 00:01:43,100 If we try this out, we are going to see that here in the highlighted directive. 26 00:01:43,100 --> 00:01:50,510 The instance that we get injected here is going to be the same instance that is provided here by our 27 00:01:50,510 --> 00:01:51,830 application component. 28 00:01:51,930 --> 00:01:56,060 We have here 10 times that the highlighted directive received. 29 00:01:56,060 --> 00:01:58,740 The course is service will I.D. number one. 30 00:01:58,790 --> 00:02:05,600 So it's the same instance, of course, is service that is getting injected throughout the whole application. 31 00:02:05,750 --> 00:02:07,460 This is the most common scenario. 32 00:02:07,460 --> 00:02:13,850 But we can imagine situations where we have a directive that somehow interacts directly with the element 33 00:02:13,850 --> 00:02:19,100 onto which it's a Blythe's or the component and the directive know about each other. 34 00:02:19,340 --> 00:02:22,460 The highlighted directive might want to get injected. 35 00:02:22,610 --> 00:02:27,680 An instance, of course, is a service that is linked to the course card component. 36 00:02:27,860 --> 00:02:34,010 The cursor component in this case is said to be the host element of the highlighted directive, and 37 00:02:34,010 --> 00:02:39,920 that's because the highlighted directive is applied directly on top of the course card component. 38 00:02:40,070 --> 00:02:46,670 So in order for the highlighted directive to receive a service that comes from its host element, we 39 00:02:46,670 --> 00:02:49,440 can use the angular host decorator. 40 00:02:49,640 --> 00:02:55,820 This is going to ensure that the dependency that gets injected here is coming from the host element 41 00:02:55,820 --> 00:03:01,790 onto which we are applying the directive and not from higher up the dependency injection Iraqi. 42 00:03:01,820 --> 00:03:06,240 So if we now try this out, we would get here an error in the console. 43 00:03:06,260 --> 00:03:07,490 So that's indeed the case. 44 00:03:07,490 --> 00:03:10,190 We have here no provider for this service. 45 00:03:10,370 --> 00:03:15,860 This is due to the use of the host decorator that is asking for a coarsest service instance that is 46 00:03:15,860 --> 00:03:17,720 linked to the course, Carol. 47 00:03:17,750 --> 00:03:23,780 And it's not traveling up the component hierarchy tree up to the application component and grabbing 48 00:03:23,780 --> 00:03:27,690 this instance here with a VIN number one like it was happening before. 49 00:03:27,710 --> 00:03:33,230 So in order to fix this problem, we will have to go here to the card component and we will have to 50 00:03:33,230 --> 00:03:37,820 provide here a private instance of the course service. 51 00:03:38,000 --> 00:03:43,970 So this instance, of course, is service exists here and is visible only to the element. 52 00:03:43,970 --> 00:03:51,620 And if the highlighted directive is tightly coupled to the host element, it can receive services created 53 00:03:51,620 --> 00:03:54,380 by the host element using the host decorator. 54 00:03:54,410 --> 00:03:59,950 So if we inspect here the council, we are going to see that the multiple instances of the course are 55 00:03:59,990 --> 00:04:04,880 each receiving its own private instance of the service. 56 00:04:05,060 --> 00:04:11,120 Let's now quickly summarize what we have learned about the different dependency injection decoratively. 57 00:04:11,300 --> 00:04:17,500 Probably the most important thing to bear in mind about this functionality is that it's rarely needed. 58 00:04:17,510 --> 00:04:23,090 Most of the times we want to inject our dependencies as application white singletons. 59 00:04:23,420 --> 00:04:31,160 We don't use providers here at the level of the component and we simply have services that are injected 60 00:04:31,190 --> 00:04:34,380 using the three cable provider, Syntex. 61 00:04:34,400 --> 00:04:36,380 So this is the most common scenario. 62 00:04:36,500 --> 00:04:43,610 If by some reason we need to get injected in a component, a service that was created at the level of 63 00:04:43,610 --> 00:04:47,770 the component itself, we can do that with the self decorator. 64 00:04:47,900 --> 00:04:53,600 The self decorator will ensure that we are not getting any service from the componentry. 65 00:04:53,630 --> 00:04:59,390 On the other hand, if we want to make sure that we do get an instance of a service from further up 66 00:04:59,390 --> 00:05:03,910 the application and not from the local component, we have the skip self. 67 00:05:04,110 --> 00:05:11,070 Decorated by some reason, we have a directive that needs to grab dependencies created by its host component. 68 00:05:11,090 --> 00:05:17,300 We can do so using the host decorator and with this, we have reached the end of the dependency injection 69 00:05:17,300 --> 00:05:17,970 section. 70 00:05:18,410 --> 00:05:23,830 Next, what we're going to do is we are going to learn all about angular change detection. 71 00:05:24,080 --> 00:05:28,050 We are going to learn about the default angular change detection mechanism. 72 00:05:28,120 --> 00:05:30,950 We are going to learn about unposed change detection. 73 00:05:30,950 --> 00:05:35,000 And we are even going to learn all about custom change detection.