vc_row]

There is more than one way to conditionally add CSS classes to elements with Angular 2 and they’re both pretty easy.

If all you need is to toggle a single class, class bindings is the best option, on the other hand ngClass directive is the preferred way if you’re wanting to toggle multiple classes.

Lets start with a simple example using class bindings first. Let’s make it so that the label name of the user turns green if the title of the user is a developer. we’re going to add a binding that looks like this.

This looks a lot like a property binding, but wait there is no property class.developer on div, so what is this? This is a special type of binding called a class binding and it is parsed by Angular and it’s basically saying that if this expression user2.title === ‘developer’ returns true, then add the developer class to this div.

Let’s add that class to our styles and then take a look at it.

We can see that the name has changed to green for user with developer in his title.

You would ask, what if I also wanted to add a second class, say an underline class to this element. That’s where ngClass comes in. So let’s create an underline class and then l’ll use ngClass to add both the developer class and the underline class.

So instead of class binding, l’ll use ngClass and then here we’ll return an object and that object will have two properties on it, one for each class we want to apply, the first one will be green and it will have an expression that looks like this.

This ngClass expression would apply the green class if the user2.title === ‘developer’, and then let’s just apply a second class, and l’ll use the same expression here, but l could use a different one. The ngClass binding is going to expect an object where the object keys are the names of the classes I want to add and the values are a Boolean expression that determines whether or not that class should be shown. So this will add the green class and the bold class if the user title is equal to developer.

My view now looks like this:

Now the green, the underlined, and the bold classes are being applied to this element.

By looking at this expression that l’ve applied for ngClass, it’s starting to be a lot of logic to exist in my template. So instead of this, let’s actually call a function on the angular component.

Now I’ll add getUserTitleClass function return the object that ngClass expects.

This should be working the same now. I had said earlier that ngClass expects an object to be returned. That isn’t exactly truth. I can actually return an object like before or I can return a string which is a space-separated list of the classes I want applied or I can return an array of strings, which represent the classes I want to apply.

So let’s see how this would look if I were going to return a string. So basically, I would replace this with an if statement and then inside here I will return a string with the classes I want applied if this is true, and otherwise, l’ll return an empty string.

And then the last thing that l could do is instead of returning a string, l could return an array or an empty array.

As you can see there are various different approaches that you can use here depending on your needs of your application and your particular style.

LEAVE A REPLY

Please enter your comment!
Please enter your name here