All language subtitles for 6. More on NgClass6

The last video we made use of the energy class directive.

Now I want to give you a couple notes on energy class and just help you understand how flexible it is.

First one to begin by telling you that the syntax we have right here is definitely what we want.

This is the best thing to write or the scenario that we are currently in.

What I am going to make a couple of changes to this thing just to show you how flexible energy class

is.

But at the very end of this video I'm going to revert all my code to what you see right here.

But if you do not want to write out some different code and then you have to just revert all of it almost

immediately.

Just take a watch at what I'm doing as opposed to making any changes to your project OK.

So inside this energy class directive there is a lot of flexibility on the different kinds of values

we can throw inside of here.

For example rather than throwing in some kind of object like that we could be as simple as throwing

in a plain string if we did something like this the energy class directive would look at this value

you would see a plain string.

It would just take that value and add it to the class attributes.

Now you're just about never going to see this ever inside of a real angular project.

If you ever have the energy class directive and you're just throwing in a plain string inside you might

as well throw it on the normal class property rather than doing something like this.

You're gonna see more frequently is people calling a method on our app component or whatever component

this is tied to who we might call a method like get class and then inside of that method we might have

some logic to decide what list of classes we want to apply to this element.

Let's go over to the app component.

We're going to define this get class method.

Again remember we're going to revert all this code in just a moment but I want to show you some common

patterns that you're going to see inside of a helper method like this.

Back inside of my app component I'm gonna go down to the very bottom and define the get class method.

There's really two very common patterns that you're going to see that I just want you to be aware of.

The first common pattern you're going to see inside of a method like this is to do some series of checks.

You might have an if statement here that says like if something is true then return a class of active.

Otherwise if something else is true then return some other

class and then maybe we want to do some like final check down here and say if something yet else is

true return yet another class name.

This is the first kind of pattern that you might want to see.

So it's going to do some kind of series of checks.

And as soon as one check is evaluated to be true we're gonna return that class and nothing else is going

to get applied.

The other very common pattern you're going to see is where we build up a list of different class names.

In this scenario we might define some array up here like maybe const classes and I'll initialize it

to be an empty array and we can do some kind of series of checks like what we just saw.

So maybe you will check to see if something is true if it is.

We can add in a new class to the classes array or maybe add in a class of active then we might do some

other check like something else and if that is true we'll push in some other class like I don't know

something then maybe we do one last check.

Of yet another check.

And then classes don't push maybe some last class of just simply check.

And then at the very bottom you'd return that array of classes though in this scenario we returning

an array of strings.

But energy class is a very capable energy class knows exactly what to do if you give it an array of

strings right here.

We could very easily call get class right now assign it to the energy class directive that's going to

take the big list of strings that we've built up and apply all those different classes as properties

to that element.

These are the two very common patterns you're going to see it when we define a helper method to decide

what classes to apply.

All right.

So like I said I just wanted to write this out very quickly as a demonstration.

I'm going to delete this method.

I'm gonna go back over and I'm going to undo until I get that object back like so again energy class.

Couple of different ways we could use it.

We can build up an object like this.

We can call a method and return a plane string.

We can call a method and return an array of strings and all the elements inside that array will be applied

as classes.

That's it for right now on the energy class directive.

Let's take a pause and continue working on this component in the next video.