Hello, everyone, and welcome in this lesson, we are going to cover angular structural directive's,
we're going to learn how to build our own directive's that look and feel like the angular NGF or ENGY
for structural directive's.
Structural directive's used this star syntax and they allow us to add or remove other elements from
the page.
We are going to learn to create a custom structural directive that is essentially the inverse of NGF.
So we are going to call it Engie X unless and here is how it's going to work.
We are going to apply this new directive called NGF unless and we are going to pass it a condition.
This condition here, just like in the case of NGF, is going to determine if the element is going to
be shown or not.
But the logic is reverse.
So in the case of engy, if we are showing the elements unter, which NGF is applied, if the condition
passed here is true, if it's false, we are having the element in this case, this div with class courses,
SGX and less, on the other hand, is going to work in the opposite way.
This means that in the case of SGX, unless we are going to show the element onto which the directive
is applied, only if the condition provided here gets evaluated to false.
So it's the opposite of NGF.
Let's then see how can we build a directive like this?
We are going to head over here to the terminal and we are going to stop the angular CLIA development
server.
Next, we are going to do Engy generate directive and we are going to specify here the name of the directive.
So we are going to put it in the directive's folder and we are going to call it Engy X Desh unless and
if you are wondering what is the meaning of this prefix here, Engie X, this prefix is commonly used
in order to identify a directive that is not part of angular code.
So it could be read as angular extended directive or angular extra directive.
It's just a way of distinguishing this directive from directives like NGF.
So anyone looking at the template is going to quickly identify that this is a custom directive, not
part of angular core.
Let's then quickly run this command and have a look here at the directives folder.
So as we can see, we now have here a couple of new files we have here, the end and less scaffolded
directive.
Let's then start building our structural directive.
The first thing that you will notice in the structural directive is that The Selecter is identical to
an attribute directive.
So what is this star syntax that we are seeing here?
The key thing to understand about structural directives is that they are applied on top of a template.
So imagine that this div that we are defining here is an energy template, and this NGF directive is
going to decide why this condition, when the template should be instantiated in a very similar way
to what we saw before.
We saw how a template can be instantiated using engie template outlet.
Well, there's something implicitly going on here with NGF.
What ANGULAR will do is it's going to discover this syntax and it's going to create implicitly an energy
template tag where the content of this template onto which NGF is getting applied is going to be present
inside this implicit template.
And the NGF directive is going to be applied here on top of this engie template as an attribute directive.
So this is what's going on under the hood whenever we are applying start NGF to the DIV courses directive.
It's just a shorthand syntax to these more explicit syntax that we are seeing here.
Notice that in this disfigured form, we cannot use that as syntax here.
What we need to do is, like we saw before, to define here a course template variable that is going
to be visible only inside the template.
In this case, we don't need to assign here any value.
If we don't assign it any value, it's going to implicitly get assigned the value of the expression.
Let's quickly confirm that these extended syntax is indeed valid.
So if we refresh here the application, we are going to see that we are still seeing here the course
of variable inside this template and that the engie template is indeed being instantiated.
If we remove here the NGF directive, we are going to see that nothing is getting instantiated to the
screen.
So it's indeed NGF that is grabbing here the template and it's instantiating it programmatically.
Also, let's confirm that if we negate here the value of the expression that our template is going to
get hidden and that is indeed the case.
So this shows that.
Syntex is a valid replacement to the star NGF Syntex and that star and if Syntex that we usually use
is just a shorthand notation for these more explicit syntax.
Let's summarize.
We have learned in this lesson that strict directives such as NGF or the custom directive that we are
able to build SGX unless I really nothing more than plain angular attribute directives that have the
special ability of instantiating a template onto which they are applied with is in mind.
Let's then start building our custom engine and less structural directive.