Hello, everyone, and welcome back.
In this lesson, we are going to cover the host dependency injection decorated.
This is the conclusion of the dependency injection section, the host dependency injection.
The character is useful whenever we have a directive in our application that we are applying to one
of the components.
Let's take, for example, here the Coast Guard component and let's apply it to the highlighted directive
that we have built before.
So if you remember, this directive is going to make our course cards highlighted.
So we find now hover over one of these cards we see here, these red border highlighting the card.
If we have a look here at the implementation of the highlighted directive, we see that it also has
a constructor.
So just like the case of a component, we might also want to inject here a dependency so that the directive
can use it.
We could inject here, for example, the courses service.
So let's do that.
We are going to copy here this member variable to the constructor and we're going to bring it out here
to the console.
What is the instance, of course, this service that we are injecting.
So let's have here, because this service highlighted the directive and we are going to concatenate
here the identifier of the ejected service.
Now, let's see what will happen in the most common scenario where our course card component does not
have its own provider.
So only the application component here has a provider for this service.
So there will be only one global instance of this service in the whole application.
If we try this out, we are going to see that here in the highlighted directive.
The instance that we get injected here is going to be the same instance that is provided here by our
application component.
We have here 10 times that the highlighted directive received.
The course is service will I.D. number one.
So it's the same instance, of course, is service that is getting injected throughout the whole application.
This is the most common scenario.
But we can imagine situations where we have a directive that somehow interacts directly with the element
onto which it's a Blythe's or the component and the directive know about each other.
The highlighted directive might want to get injected.
An instance, of course, is a service that is linked to the course card component.
The cursor component in this case is said to be the host element of the highlighted directive, and
that's because the highlighted directive is applied directly on top of the course card component.
So in order for the highlighted directive to receive a service that comes from its host element, we
can use the angular host decorator.
This is going to ensure that the dependency that gets injected here is coming from the host element
onto which we are applying the directive and not from higher up the dependency injection Iraqi.
So if we now try this out, we would get here an error in the console.
So that's indeed the case.
We have here no provider for this service.
This is due to the use of the host decorator that is asking for a coarsest service instance that is
linked to the course, Carol.
And it's not traveling up the component hierarchy tree up to the application component and grabbing
this instance here with a VIN number one like it was happening before.
So in order to fix this problem, we will have to go here to the card component and we will have to
provide here a private instance of the course service.
So this instance, of course, is service exists here and is visible only to the element.
And if the highlighted directive is tightly coupled to the host element, it can receive services created
by the host element using the host decorator.
So if we inspect here the council, we are going to see that the multiple instances of the course are
each receiving its own private instance of the service.
Let's now quickly summarize what we have learned about the different dependency injection decoratively.
Probably the most important thing to bear in mind about this functionality is that it's rarely needed.
Most of the times we want to inject our dependencies as application white singletons.
We don't use providers here at the level of the component and we simply have services that are injected
using the three cable provider, Syntex.
So this is the most common scenario.
If by some reason we need to get injected in a component, a service that was created at the level of
the component itself, we can do that with the self decorator.
The self decorator will ensure that we are not getting any service from the componentry.
On the other hand, if we want to make sure that we do get an instance of a service from further up
the application and not from the local component, we have the skip self.
Decorated by some reason, we have a directive that needs to grab dependencies created by its host component.
We can do so using the host decorator and with this, we have reached the end of the dependency injection
section.
Next, what we're going to do is we are going to learn all about angular change detection.
We are going to learn about the default angular change detection mechanism.
We are going to learn about unposed change detection.
And we are even going to learn all about custom change detection.