All language subtitles for 18. Replacing NgClass

All right my friends.

Enough with this silly kind of background color example that everyone does.

Let's turn this into something a little bit more interesting.

We're going to accomplish the original goal here which was to allow ourselves to have a replacement

for the energy class directive.

Well we really have to do here is kind of make some updates to this background color center rather than

setting some kind of like background color.

I'm going to change the name of this.

Something like set lasts about class names just to kind of differentiate it from the class keyword now

our argument to this is going to be an object.

Remember we're trying to re implement the energy class directive of the object that gets provided is

going to have some keys those keys are going to eventually end up as classes that we're going to apply

to our underlying element and then for every key we need to take a look and see whether or not that

expression evaluates to either true or false instead of receiving the argument of color right there.

I'm going to receive an argument of like class Obi J.

Short for object and I'm going to annotate that as being of type any then I'm going to replace the logic

inside of there.

We're going to use a four let e in class of E.J. loop knows that this is a for in loop.

You can use a for in loop to iterate over the keys of an object which is exactly what we want to do.

Now the key right here is really gonna be like the class name that we want to apply to our element.

And then if we look up the key inside of that object that will give us the Boolean value that we really

care about.

We can say if last Obi J at key if that is true.

So if whatever expression it was provided evaluates to true and we want to take this key and apply it

as a class to our underlying element but to do so inside the if statement will say this dot element

not native element you'll use the class list API we'll call add an add in that key and we can handle

the else case.

So the case in which whatever key we just looked up evaluated to false in that case we'll look at this

start element not native element class list but in this case we're going to remove annoyed you remove

the given key.

Remember when I say key I'm really talking about like a class that we want to apply okay.

Let's say this.

Now we're going to look back over I'm gonna go down to that H for element that we were working with.

There are now completely redesigned this directive.

Sophie you run with this code right here.

We're gonna get some bad results so I'm going to delete that usage instead.

I'm going to go around to all the energy class directives we have inside of here.

I'm going to replace those with the app class directive that we just put together.

I can replace energy class with app class energy class with app class and energy class with app class.

Then let's say this look back over and you'll notice that the entire application is still working exactly

as it was before before with no errors.

Well no errors yet.

We can take a look and see that sure enough that first button right there got the disabled class and

we've got the active class on the button that is selected.

I can start to hit next and they all update appropriately and as I start to get to the very end to the

list the like 20 for the next button gets great out as well.

So that's it.

We've now created our own customary placement for energy class.

I think you can agree with me that at the end of the day the actual logic that goes in this is not the

worst thing in the world.

It's really just understanding all this like special at input decorator and setters and all that crazy

stuff that makes these directive things really complicated.

Once you understand that everything else starts to get really easy okay.

Let's take a quick pause right here.

When we come back the next video we're going to start to work on our own custom structural directive.

This right here is an attribute directive.

We're gonna make a very different one very similar to the energy for directive.

Quick pause and I'll see you in just a minute.