All language subtitles for 5. The NgClass Directive6

We've now got our list of pages being rendered out on the screen.

Now let's make sure that by default when user first comes to application we highlight this first number

right here.

Want to make sure that is shown as blue that the user understands which page they are currently looking

at.

If we go backwards the bootstrap documentation and scroll down just a little bit.

There's a section here called disabled and active states in order to get a number to show up blue.

We're gonna find the ally that is wrapping that number and add on the active class name to it.

Let's figure out how we can actually accomplish this get started.

I'm going to flip back over to my app component class and suddenly have component class.

I'm gonna add in a new property that I'm going to call front page and by default I'll initialize this

to be zero.

This property right here is going to keep track of what page the user is currently looking at a default

they're going to be looking at the first image or the first page of data.

Now we can use this current page in combination with the index variable right here to decide whether

or not we should apply some particular class name to this l I element though on the fly element we're

going to have to add in some kind of logic to the same to figure out whether or not we want to apply

that active class name do so we're going to use another directive unlike the energy for directive.

This new one that we're going to take a look at is an attribute or property directive.

It means that it's going to change a property on this light element.

So here's how it's gonna work.

University myself a little bit of space

and then right after class I'm going to add in the energy class directive the energy class directive

is extremely flexible and allows us to specify some different number of classes to apply to an element

based on some different forms of logic.

Let me show you the best way of writing out what we're trying to do right now.

Right now we're trying to decide whether or not to put on that active class name depending upon whether

the current age right here is equal to the variable.

I inside of those double quotes I'm gonna write out a set of curly braces just one and I'll write out

inside there active is going to be I equal to burnt h like so who we're creating right here is not some

kind of interpolation syntax as we saw down there with those double curly braces instead this creates

an object and on the object we're adding on the name of the class that we want to add as a key and the

value for that is going to return a boolean value if this evaluates to true an active will be applied

as a class to that Ally.

Otherwise if this evaluates to false an active will not be applied as a class let's say this and see

what happens I can flip back over and I'll see that by by default that first page gets highlighted if

I pull open my element inspector and click on that element I can see very easily that that Ally did

in fact get the active class but none of the other allies got that class at all OK so that's the NGO

class directive as I mentioned it's very flexible in nature and there are several different ways we

can make use of it this right here is one the most common and useful ways of making use of it.

So we're gonna define the object of a couple of different key value pairs for each key is the name of

the class and the value is going to be some kind of boolean expression let's take a quick pause right

here when we come back the next video we're going to take a look at some different ways of using the

energy class directive.