Hello, everyone, and welcome back.
In this lesson, we are going to cover the directive exporter's functionality.
So we have here a highlighted directive that is currently applied here to this element.
The directive works transparently by modifying properties in the host element and detecting events.
But there are some situations where we would like to access the directive directly, either here at
the level of the template or at the level of the application component where the directive is getting
applied in order to interact with the directive programmatically as well.
This could happen, for example, if the directive provides a public epper, let's say that this directive
would provide here an extra method called doggle.
And this method is meant to be used by third party components.
This method, what it would do, it would be to toggle the value here of the ease highlighted property.
When we toggle this, we are also going to emit here a new toggle highlight event.
These methods could potentially be called here by the application component template or by the application
component class.
But for that, we need somehow to get a reference to this directive and that is where the directive
export as functionality comes in handy.
We are going to make this directive available to the template by using here the export as property of
the directive decorated.
We are going to give the directive a template name that will allow us to grab a reference to this particular
class instance.
So we are going to export this using the Agil short notation with these in place.
Now, if we want to grab here a hold of the directive, we can do so by creating here a template reference.
Let's create here a template reference called highlighter, and we are going to assign it the value
Agil.
So this is the name that we have used to export this directive.
Now we can use this template reference highlighter to call any public method available here on the highlighted
directive.
Let's try this out.
Let's say that whenever we double click here on the description, we are going to toggle the highlight
of the curve just as an example.
So we are going to detect here the browser double click event.
And whenever the double click occurs, we are going to toggle the highlight.
We are going to use this template reference here and we are going to call the method toggle.
Let's have a look at this in action.
If we now enter here, the care, we are going to see that we are turning on the highlight.
But if we double click here on the description, we are going to see that we are turning it off.
If I double click again, we are turning it back on, etc. So as we can see, we can indeed grab a reference
here to the directive and use it here in our application component template.
If by some reason our application component class also needs a direct reference to the directive, we
can also query here using The View decorator.
So we are going to apply here Vuit shall we are going to say that we want a reference to the highlighted
directive and with this we should have here the directive injected.
Let's confirm these.
Let's log to the council the value of the highlighted member variable in the end after viewing it.
Mayford If we reload the application, we are going to see that here on the console.
We get here a reference to the highlighted directive.
So as we can see, this corresponds to an instance of this typescript class and we can even express
this template query that we do in a different way.
Let's say that instead of querying here the directive directly, which we did, we are going to query
here the course card component and we are going to use here the configuration object that we can pass
to view child to specify that we want to read from this element here the highlighted directive.
This means that if by some reason a given element has multiple custom directives applied to it, then
in that case we can carry them separately using these special Syntex.
Let's have a look at this in action.
So as we can see, this query is still working.
We are grabbing here the highlighted directive that these are linked to the course card components and
we d we have covered of angular attribute directives.
Let's not talk about a different type of directive, structural directives.
We have already been using directives of this type using the start syntax.
Examples of this type of directives are NGF and Engie for let's now learn how to build our own custom
structural directive.