Hello, everyone, and welcome back in this lesson, we're going to continue to dive deeper into the
engy template tag that we covered on the last lesson, we are going to learn about the engie template
very well context.
And we're going to learn how to instantiate templates using the structural detective engie template
outlet.
As we have seen in Save Energy template, we can access variables in the external context of the template
so we can access here the course variable that belongs to the Coast Guard component.
Let's now learn how to give to the template its own private variable context that is going to be visible
only inside the template itself.
The ability to give to each template tag its own context, where we can pass data that is specific to
a particular template, for instance, is essential in order for making the template reusable.
Because another key characteristic of engie template is that we can define a template in one component
and then pass it as input to other components by filling in the context of the template as we need.
Let's give an example.
We're going to take this template here of the blank image and we're going to pass it as an input here
to the course curve component.
Let's first extract here from these components the template and let's move it here to our application
component.
So here is the component where we are creating this curve that we see here on the screen.
We're going to paste in here our blank image engie template.
Now we are going to give to this template a context and noticed that after refreshing the application,
we can see here that the blank image is gone.
This is normal.
This is because we have moved this a block of code that shows the image here to our application component
e-mail.
And now we only have here the definition of the template, but we are not effectively using the template
anywhere in our code.
So in order to define a context here to our template, we are going to be using the following syntax.
We're going to add here a new variable called Course Name, and we are going to declare it here as an
input for the template using the key word, a dash and then the camel case name of the variable in this
case, of course, name.
So if we would have here a second or third variables or more, we could have them here using the same
syntax with the length keyword.
Now we have here a variable that we can use here inside our template and we can use it here instead,
of course, that description.
Now, let's see, how can we fill in this variable?
Let's try to fill it in by directly instantiating the template.
A template can be very easily instantiated using the engie template outlet structural directive.
So let's try to instantiate the template inside div tag to start.
Let's apply the structural that we have the energy template directive.
We need the star here, just like the case of NGF and energy for and we are going to define here what
template do we want to instantiate.
So in this case, we want to instantiate here the blank image template.
And in order to make this more visible on the screen, let's have here a couple of horizontal separators
and try this out.
So as you can see, we are not yet passing in the template as an input parameter here of the course
curve.
We are going to do that later.
Right now, we are simply trying to define a template with an input context and we are trying to instantiate
the template using engie template outlet.
And as we can see here above the horizontal separator words we have here, the blank image template
instantiated.
But notice that this context variable here, of course, name is not filled in.
We have just created the template, but with a blank context.
In order to fill in this template instance with a context, we are going to be providing here a context
object using this syntax in engie template outlet.
We now need to fill in the context object with the data that we need.
So let's create here one extra property and we are going to give it a different name.
We are going to call it description and we are going to fill it in with the course description using
here the course object.
So we are passing discourse description to the template.
Now notice that if we try this out, just like it is without any further modification, we can see that
we are still not accessing here the data that we need.
OK, so how do we access it?
We know that we have here a variable called course name that is not being currently populated in order
to populate it.
We are going to assign here a value to the.
Course name, and we are going to have here a JavaScript expression now this expression here passed
on the left variable definition of the input variable of the template is going to be evaluated not against
the application component class itself, like it was the case here with course that I can use.
This is being evaluated here against the application component class.
These are that expression instead is going to be evaluated using the context objects.
So if we access here the description property, this is effectively calling the description property
of the context object itself.
If we now try this out and we refresh the application, we are going to see that now.
The name of the course is accessible inside the template, the same way that we have instantiated here
one instance of the blank image template we can have here a second instance.
So let's copy these and let's fill in the second instance with a different context.
So instead of accessing here the course local variable, let's access here another position in the courses
array.
We are going to access, for example, the first position.
And if we try this out, we are going to see that this time around.
We have here two instances of the template and each one with different input data.
We have here a different course title.
Notice that we have used here an extra div in order to instantiate here our template using engie template
outlet.
Instead, we can alternatively also use engy container.
If we now try this out, we are going to see that everything is working as expected.
So that engie container tag is a great way of using engie template outlet because we don't have to create
an extra element just to instantiate a template.
Let's now continue to dive deeper into angular templates and cover some more advanced functionality.
We are going to see how can we take a template like the blank image template and we are going to pass
it as an input to another component.