All language subtitles for 17. Input Aliasing

We are now one step closer to re implementing the energy class directive.

There's just one last little trick I want to show you.

We've made use of several directives coming from angular already and you might notice that whenever

we made use them we never had to write out like the name of a directive.

And then separately like the name of some property I'm gonna show you a little trick here rather than

having a at class directive and a background color property.

You can instead change the name of the property that we are setting on our directive rather than saying

that we're going to set background color right here.

We can change that to say app class and back inside of our template.

I'm going to change background color to app less and now because the selector or the way that we specify

the directive and the property name are identical.

We can technically remove the first app class this right here really does two different things for us.

It says that we want to apply the app class directive to this element that's also going to attempt to

set the app class property on the directive we can now save this and we'll get the exact same behavior

as what we had before

OK.

So pretty simple pretty straightforward.

Now one last thing on it mentioned here.

Just because this is covered very thoroughly in the official documentation you're going to see at the

official documentation says that putting a property on the cut on the actual class called app class

is really confusing because when you read this right here and you see app class as a developer you might

be looking at that and saying like wait a minute what does this method do.

Why is it called app class.

A very commonly it would be really nice if we could change the name this method to something else.

It makes a little bit more sense done other words if I could leave this as like background color.

That would be great because then I could read this as saying oh we're trying to like set the background

color.

Yeah sure that makes sense.

But if we make that change then we can not tried to use app class back over here.

We would have to go back to having separate app class and background color but to fix this we can use

a little feature of the input decorator though on the input decorator we can provide a string that is

going to be the name of the property that we are trying to set from the outside world.

In other words we are trying to set the app class property inside of this input decorator we can put

in app class.

Now whenever we try to set the app class property is input decorator is going to kind of redirect that

to the background color method.

But from the outside world we are setting up class.

That's what everyone in the outside world thinks.

But inside of our actual class what actually gets executed is the background color method.

Now we can save all these changes with makeover.

Yep still works OK.

So we've now got everything we need to know about making a custom energy class directive.

Let's take a quick pause right here.

We'll come back the next video.

We're gonna make a couple of quick changes to this thing to finish off this directive.

Now we're gonna take a look at structural directives.