Hello, everyone, and welcome back.
In this lesson, we're going to start the implementation of our energy and unless Kissam structural
directive, so as we have seen on the previous lesson, one of the key features of a structural directive
when compared to a plane attribute directive is the ability to instantiate a template.
So the first thing that this directive is going to need is to grab a reference here to this template.
We can do so by directly injecting this template here in our constructor.
So if we declare here a variable that we are going to name template Raef, this is going to be a programmatic
reference to our template.
With this variable, we're going to be able to instantiate the template somewhere on this directive.
Now that we have here a reference to the template, we're going to need a mechanism for instantiating
it.
Let's remember that the template by itself will not render these e-mails here.
We need a way to instantiate the template.
So in order to do that, we are going to inject here another angular built in service, which is called
the view container.
The view container is of type view container Araf.
And if we expect here the API of this service where we can see that we have here to create embedded
view method that takes a template to reference.
This is the call that we are going to be doing to our view container to instantiate the template on
the mend now that we have the template and the container.
What we need to grab next is a reference to the condition being applied to our directive.
Let's quickly apply the engie access and less directive here.
So we are going to apply it here and we are going to see that this image is only going to be visible
if the course icon URL is available.
So in order to do that, we are going to passing the course that I can use Worrill expression and we're
going to negate it.
The way that we can read this condition is we are always going to display the course image to the user
unless the icon URL property is not present.
Let's then see how the engie access, unless active can grab a reference here to this condition.
The first thing that we have to do is to bear in mind that the same engie template syntax is getting
applied here.
So what is happening with the use of this type of syntax is that we are creating an energy template
that inside contains only the energy analyst directive.
And we are grabbing here this condition and we are applying it here as a natural directive at the level
of the templates.
So we are going to apply here the energy axis and less attribute directive and we are going to pass
in here the condition which in this case is to confirm the absence of the Akinyele property.
So this is a property like any other input property, like the course property that we have here on
the card component.
So the way that we are going to pass it to energy access and less is via an input property.
Now, we can add here a property that is called energy access and less annotated with an input.
But instead of doing that, we are going to receive the property via a setar method.
So we are going to declare here a center.
We are going to give it the exact same name as the property.
Otherwise this will not work.
And we are going to annotate this letter with the input decorator.
Now, here is the single argument on this set that we are going to receive the condition which at this
point is already evaluated to a boolean.
At this point here in our Satyamev, we have everything that we need to implement the main logic of
the directive.
We have the condition that we know if it's true or false.
We have the template and we have a way of instantiating the template if the condition is false.
So let's go ahead and instantiate the template we have here and if condition and we are going to see
if the condition is false, then in that case, let's instantiate the template.
We are going to do that using our view container.
We are going to create an embedded view and we're going to be seen as a reference, our template.
So with these, we are creating here a new template here in the place of these engie template tag.
So here is the part of the DOM where the template is going to be instantiated.
Noticed that I accidentally forgot to copy here the course image closing tag.
So let's do that right now and go back here to our implementation.
So this is the case when the condition is false.
Now we are going to have here the other case, which is what happens if the condition is true.
Then in that case, with this directive, what we want to do is we want to remove the template from
the screen, and we can do that by calling the view container again.
And then we have to.
The clear method this is going to remove anything that we might have instantiated in the container by
calling creating better view, and with this our implementation is almost completed.
Notice at this point that this better method is going to get called directly by ANGULAR and it might
get cold even if the view is already in place.
We don't know how many times this method is going to get called by the framework itself.
So we want to add here some precaution to avoid creating the view.
Again, if the view has already been created the same way, we want to avoid calling clear if the view
has already been cleared.
So we are going to have here a new flag that is going to help us to avoid those situations.
We are then going to create here a flag that we are going to call visible and we are going to initialize
it to foal's.
Now here on our condition, we are going to create here the view and display the image to the user if
the view is not yet visible.
So let's add that condition here in our if close, we are going to negate the visible flag this way.
This is only going to get cold if this flag is set to falls in the same way here in our elesclomol.
We also want to avoid calling this if the view has already been clear.
So let's start by calling this only if the condition is true.
And we are going to add here that the view needs to be currently visible.
Now, here in the if part of our condition, we are going to set the visible flag to draw.
This is because the view is now visible on the same way.
Whenever we clear the view, we are going to set here the visible flag to false.
And with this, we have finished the implementation of our structural directive.
Let's go back here to our template before we try this out.
Let's remember that here our course card component, the way that it's currently implemented, is looking
for a coarse image tag here inside the content part.
So we need to apply here the standard syntax of SGX, unless otherwise this would not work.
So I'm going to remove here that engie template, extended syntax, and I'm going to apply here.
The staff, Syntex, this way, the query that the course card is making for finding a coarse image
here in the content part of the course tag is going to find the coarse image and the image is going
to get projected here on the screen while all this is happening.
The end, unless logic is still going to be applied.
Let's now try this out.
If we reload here, our application, we are going to see that the image is still getting displayed
here on the screen.
But what happens if we now set this condition to true?
If we try this out, we are going to see that now the image is getting hidden.
So our end and less logic is working correctly, as expected.
As you can see, it's very simple to create an angular custom structural directive.
We just have to create a normal standard attribute directive and have the view container and the template
reference injected into our direct.
From there, we can add or remove the inject the template into the DOM depending on any condition.
You could use this, for example, for showing or having certain elements of the page, depending on
the security roles of a given user.
And with this we have concluded the directive section of our course.
Let's not start a brand new section.
We are going to talk about the angular view encapsulation mechanism and in general, how to style angular
components.