Hello, everyone, and welcome back.
Listen, we're going to start to learn how attribute directives can interact with the elements onto
which they are applied.
So this instance of the highlighted directive is being applied to this instance of the Coast Guard component.
Now, this particular instance of a Coast Guard component is known as the host element of the highlighted
directive.
So a directive is always applied to a host element.
There are several ways that the directive can interact with the host element.
One possible way is to add an extra Cyesis class here to the Coast Guard element.
Let's see how we can do that.
If we head over here to our standard Cyesis file, you're going to notice that here at the bottom of
the file you're going to find the highlighted Cyesis class.
Let's say that we would like to apply the highlighted Cyesis class to the host element of this directive.
The way that this directive could do that is to interact directly here with the DOM element that corresponds
to the cursor and then adding a Cyesis class.
Let's see how we could do that.
This would be the equivalent of selecting here the course Khadem element and assigning a new value to
a dumb property.
So here dollars zero is pointing to the cost curve element and these the element contains a class name
property, which is currently empty.
If we assign this to a string, for example, containing the value highlighted, which is the name of
our Cyesis class.
This is going to add this first class here to our DOM element.
So as we can see now, we have here this red border and these course he's highlighted.
If we expect here this element, we are going to see that indeed this card here has a Cyesis class highlighted,
added to it.
So we did that manually here via the console in the case here of our directive.
What we want to do is something similar, but using an angular specific construct, which is the most
binding decorator, the host binding the creator is going to allow us to modify dom properties of the
element onto which the directive is applied.
Let's say that we would like to assign the value highlighted the name of this first class to the class
name file.
We could do so in the following way.
We are going to adhere to the host binding the creator to a new method that we are going to call Cyesis
classes.
These methods is going to return here.
The easiest classes that we want to apply to the host element of this directive.
So in this case, we just want to apply one Cyesis class.
Now we need to identify to which the property.
Do we want to assign this value?
And as we have seen in the council, we want to modify the class name property.
Notice that in order for these WEIMING annotation to work, we need to apply this to a typescript getter
methods.
Or if we now try this out, we are going to see that the highlighted Cyesis class is again being applied
here to our course curve.
So as we can see, the host vining decorator is really nothing more than a convenient way for allowing
our directive typescript class to directly interact with the host element onto which the highlighted
directive is applied.
In this case, we are using host wiling to write to the class, name the property of the host element.
We can use the host binding the character to write to any DOM property of the host element.
In general, it's not only for class name, but because adding and removing Cyesis classes to the host
element is such a common operation.
We have here a shorthand notation available here in our host binding configuration.
So in this case, if we instead write to the property class DOT and then the name of this first class
that we want to add or remove and we simply return here, the value true, we are going to see that
the highlighted class is still getting applied to the host element.
So as you can see, the special notation for adding or removing Cyesis classes does indeed make the
code more readable.
But under the WHO, we are really writing to the class name properties.
So we are writing to a DOM property.
Notice that we can only use binding to write a value to a property that is already known.
So if we try to write to a different DOM property that is not known, let's say that we are trying to
write to the does not exist the property.
If we try this out, we are going to see that now our program crashes.
And if we expect here the calls for hearing the council that the property does not exist is not a known
property, of course.
So we can see it's essential that the name of the property that we are writing to is a known the property.
The same way that we can use binding to add or remove the asset classes, we can also add or remove
styles.
Let's say that we want to add here a new board to this element.
We can do it in the following way.
We are going to access the DOM property style, which is a known DOM property, and we are going to
specify here the border property.
We're going to say that the border of this element is going to be one pixel end of type Soulive and
color red.
If we refresh this, we are going to see that now our border is getting applied here to this element.
And if we spec this, we are going to see that the border is getting applied via a style.
So this is not being applied via a success class.
This is being applied directly by the host, by decorator to the style dom property.
Now, in the case of our concrete implementation of the highlighted directive, what we want to do is
we want to add the highlighted class under certain circumstances.
So we are going to use here the notation class that highlighted.
This is going to add the sixth class if the value returned is true.
So let's try this out.
We can see that indeed we have here the class being correctly applied and if we return here false,
we are going to see that the class is no longer applied as expected.
Now, the question is, when should we add or remove this class to this element?
We can do so depending on the content of an input expression that we are going to pass in here to the
directive.
Let's say that we want the value of the expression to be set to true.
So in order to declare this part as an expression, let's remember that we have to use here the square
brackets notation to indicate that this is an input property of something applied to this element.
Notice that this input property will not be an input property, of course.
This is going to be an input property of the highlighted directive that is applied to the course in
order to receive the value of this input property.
We are going to switch over here to the highlighted directive and we are going to add here another input.
This is going to have the name highlighted.
Notice that this name is the name of the input property.
This could be completely different than the name here from the selector.
And we're going to define here a boolean property called is highlighted.
We are going to initialize it with the value falls.
So this is the default value if no value is set here.
What we're going to do now is instead of returning here false, we are going to return the value of
the is allative member variable.
So if we try this out, we are going to see that this time around, the highlight has been correctly
applied according to the value of the input expression.
So if we set this now to false, we are going to see that the highlight disappears.
And if we remove here the expression, then the default value that we have set here is going to be applied
and we don't have here any highlight.
As expected, setting the properties on the host element is just one way that the directive can interact
with the host element.
Notice that so far we have been using host binding to set the properties.
This is very different than ASML attributes.
We can also use here the host binding the character if needed to set the attributes of the host element.
Let's say that this card here has an attribute called disabled.
We could set the attribute which is different than the DOM property.
Also by using host binding.
So we the host binding, we can write to an attribute using the attribute notation here with a dot.
And then we have to write here the name of the attribute that we want to modify.
And we are going to declare here a getter.
We are going to call it disabled and we are going to have this value return.
Let's see the value true with this in place.
We are going to reload our application.
We are going to inspect here the course curve and take a look.
We have here a new attribute disabled set to true.
So let's remember that a DOM attribute is different than DOM properties.
Sometimes they have exactly the same value.
In certain cases, the browser is going to keep the property and the attribute in sync and sometimes
these two can have different values.
In either case, we can write to both attributes and DOM properties by using the host binding syntax.
Next, we are going to learn how to directive can interact with the host element via custom events.
This is coming right up in the next lessoned.