How To Apply Conditional Styles to Components Using Angular Declarations

If you need to apply dynamic styles to a HTML element in your Angular applications, there are a few different options available, including ngClass and ngStyle. In today’s article, we’ll explore both in detail.

Component Styling Using ngClass

Most of the time, we want to apply component styles at all times. We can do that by simply adding classes to our templates, like so:

<label>A Bootstrap Button
<button class="btn btn-primary">Click me</button>
</label>

And then, there are styles that we want to apply conditionally based a certain condition being met. For times such as these, when an element’s style may have multiple states, the ngClass directive is just the trick!

The ngClass directive will take an expression that can be one of three types:

• an object
• an array
• a string

Let’s go over each one of the above three cases with examples.

We can toggle CSS classes based on a condition, by passing in a JavaScript object where the keys of the object denote the class names and the values assign the conditions:

<div [ngClass]="{
   'conditional-class': condition
}">
</div>

One simple use of ngClass is to assign multiple static class names all at once. To do that, we pass in an array of class names:

<div [ngClass]="['class1', 'class2']"></div>

Finally, we can use ngClass to assign multiple CSS attributes based on different conditions:

<div [ngClass]="{
   'class1': condition,
   'class2': !condition
}">

Adding Embedded Styles to Our Templates Using ngStyle

We can invoke a component method from the template to calculate the styles at runtime:

<label>A Bootstrap Button
<button [ngStyle]="setStyles()">Button</button>
</label>

One caveat with using the ngStyle declaration is that it causes CSS styles to be applied directly to the component. While there certainly are some valid reasons for applying directly styles to an HTML element, it’s generally a bad idea to do this and should be avoided. The reason is that embedded styles take precedence over any CSS styles except those that are marked with the “!important” qualifier.

To illustrate, take the following component:

<label>A Bootstrap Button
<button [ngStyle]="{background: 'gray'}">Button</button>
</label>

Here is the resulting HTML and embedded style:

<label>A Bootstrap Button
<button style="background: gray">Button</button>
</label>

Be that as it may, sometimes an element needs an embedded HTML style, as it’s simply not known up-front. In Angular, the ngStyle built-in core directive comes in handy.

To recap the use of the ngClass and ngStyle directives:

• For state styles that don’t have a pseudo-class selector linked to them, your best choice is to use ngClass.
• If the ngClass expressions get too big, it’s a good idea to move the calculation of the styles to the component class.
• For situations where you have a dynamically calculated embedded style, use ngStyle. This should be needed only rarely.

Conclusion

Angular offers a few different options for applying dynamic styles to page elements, including ngClass and ngStyle. Both accept a variety of arguments that should satisfy any use case that you may have.

Check out TechRepublic Academy to learn more about Java!