Hello, everyone, and welcome back.
In this lesson, we're going to dive deeper into the angular core engie template called Directive.
We have seen the energy template feature before when we cover the energy.
If so, we are now going to get back to that feature and cover it in detail in order to explain engy
template.
Let's go back to the case when we first found it.
So if you remember, we found the first occurrence of engie template whenever we were trying to provide
here some alternative content to the image in case an image is not provided for a given cause.
So what we were doing was something like this.
We were using Engy if in order to detect if the cause has an icon, you are warrell property available.
And if that's the case, we will be displaying here the coarse image that in this case we are projecting
with energy content.
However, if there is no course I can you warrell available, then we would like to display here a blank
image template.
And if you remember, the template would look something like these.
We would use the tag engie template to define here a template segment.
We will use a template reference to give this template segment a name.
We are calling it blank image.
And inside we are going to add here some content.
For example, we are going to display here a warning to the user using the word Cyesis class that no
image is available yet.
And we are also going to display here a default image.
So we are going to fill in here the source property and we are going to go inside the assets folder.
We are going to take the image name, empty that image that and we're going to use it here in our energy
template.
Now, let's have a look at this functionality in action.
So this is what happens if there is a coarse image available.
So like before we have here the image.
But if this time around we open here our DeVita file and we comment about the image for a given course,
we are going to see that we have here applied the default content.
No images available yet.
And we have here the default image.
Now, what is happening here is that we are referencing here a block of a template using a template
reference any e-mail and access that is going to be filled in inside.
The engie template is going to be part of this template segment.
Now, notice what happens if we don't mention here the blank image template reference here in our else
clause.
What is going to happen is that the content of our energy template is no longer displayed anywhere on
the page.
So let's have a look at the e-mail to see what we have there.
Let's inspect here the title and just below it.
Let's see if we can find our energy template so we can see we can only find here the course description
immediately.
So there is no content between the title and the description.
So it's like this block of code here.
The engie template, for instance, does not exist.
In our e-mail page, you can also see that the image is hidden, but that's because of the use of NGF
and that is as expected.
But it's a bit surprising that the contents of this e-mail block does not get displayed anywhere on
the page.
So the way that this works is that ANGULAR is going to inspect the template, is going to notice that
there is a reference here to a template segment, but this template segment is not going to be added
by default to the screen.
This template segment is going to be kept by angular for later and it's going to be used only if we
explicitly use it, either by using it here on the else close or in some other way that we are going
to see in a moment.
Right now, let's talk about what data is visible here inside the template tag.
So the same data that is visible in the template that is surrounding it is also visible here.
Inside Engie Template, for example.
We can have access here to the course variable.
We can say, for example, here in, say, M.G. template that course the description, the name of the
course has no image yet.
And as you can see, as we refresh the application we get here, the correct title of the course.
So the course variable is indeed visible here inside of Engy template.
Notice that although engie template can access variables such as course that belongs to the template
where it's embedded, we can also have engie template create its own variable scope with its own private
variables visible only inside the energy template tag.
Let's quickly summarize what we have learned in this lesson, and the template allows us to define blocks
of e-mail that correspond to a single isolated template.
This code is not going to be displayed by default on the page.
It's.
Only going to be displayed if we use the template somewhere, we have to instantiate that template somehow
in order for the content of the template to be visible, the template can see the variables of the context
on which it's embedded.
For example, our blank image engie template can see the coarse variable.
Let's now alert and how can we instantiate a template and let's learn how can we give it its own private
variables?
This is coming right up in the next lesson.