Hello, everyone, and welcome back.
In the last couple of lessons, we have learned how to create an energy template tag, which wraps a
partial template.
We have learned how to give this template an input context, and we have learned how to instantiate
the template using engie template outlet and the context variable in order to learn that we were instantiating
the template here directly in our application component.
But this is not how this template is meant to be used.
Let's delete this and let's instead pass this template to our course card as an input parameter.
So what we are going to do is we are going to create here an input variable that we are going to call
no image templates.
We are then going to fill in the value of this input property by passing in here a reference to this
blank image template partial that we have here now in our course car component.
What we're going to do is we are going to receive here this template as an input variable.
So we are going to define here a variable with name no image TPL and we are going to define it as being
of type, template reference.
We need to provide here a parameter type.
Let's provide the any parameter we have here, a reference to this template and we can now use this
template here in our course card component here inside our cursor template we were already having here
and else close for the case when we don't have here an image available.
So let's apply here to the same principle.
We are going to define here a template.
Let's give it a different name.
We going to call it no image and we are going to add it here to our course curve component template.
Let's add here a reference and let's call it no image.
So what happens here is that if we have here and I can Eurail property, we are going to use the coarse
image that we are passing as an input to this component.
Otherwise, we are going to instantiate here this template now inside this template.
What we want to do is we want to instantiate the content that we have received here and we want to pass
in as input the course object so that the course data is available here and we can see the course name
on the screen.
The way that we can instantiate this template reference that we have received here is by using engie
template outlet.
So let's add here and engie container tag so that we have a hook to apply these engie template outlet
structural directive.
We are going to apply here the style syntax.
Otherwise this will not work.
We are going to define what template do we want to instantiate using engie template outlet.
In this case, we want to instantiate here the template that we have received as input and we can already
try this out.
So if we reload the application, we are going to see that our template that we have passed in here
is an input to the component is already being instantiated inside, of course, CURTH components.
So we have declared here a template with its own isolated context.
We have not used it here in our application component.
Instead, we have passed it as an input into the crosscourt component.
The cursor component then has here an input variable of type template Gorev, which can be used here
at the level of the template doing Stasch, yet the template reference that was passed in.
So we are using here engie template outlet.
We are passing the name of the variable no image DPL that corresponds to this input variable here.
And we are passing this to Engy template outlet which is instantiated here.
The template that we have received as configuration.
Notice that the name of the course is not being printed out here.
For that, we are going to need to fill in here the context property.
So again, this is a plain JavaScript object.
We are going to fill in the description property here and we are going to pass it these value here,
because that description, if we now try this out, we are going to see that this time around, the
name of the course is being printed out to the screen, meaning that it's available here inside the
instantiated template.
And we these we have seen how many of these features interact together.
We have seen here an example of how engy container, engie, template, outlet, engie, template and
input variables can create a component that is very customizable.
Notice that this component is receiving here a template as an input parameter, and it's also receiving
here part of its content via content projection.
And with this we have completed our section on angular templates.
What we are going to cover next is angular directive's.
We are going to learn how to build our own custom directives, such as, for example, the engie.
Or if DirecTV, this is coming right up in the next section.