Class Binding [ngClass] in Angular

Ever wondered how websites change styles instantly based on user actions? For example, a button turns green when clicked, or a menu item is highlighted when you select it. In Angular, you can do this easily with class binding!

Class binding lets you add or remove CSS classes dynamically based on what’s happening in your app. This is super useful for making your app look more interactive and responsive to user actions or data changes.

In this article, we’ll look at what class binding is, why it’s useful, and how to use it in your Angular projects with simple, real-world examples.

For a detailed video explanation of this concept, check out my video on class binding in Angular with practical examples by clicking the link below.

https://youtu.be/wYd0nvfNAvY?si=CfPYxs6KYG2XEYOI

What is Class Binding?

Class binding allows you to connect an element’s class attribute to a property or expression in your component. This means the element can automatically add or remove CSS classes based on the logic you set in your code.

Get InterviewPro’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

There are 3 ways to implement class binding in Angular:

• class.<class-name>
• [class]
• ngClass directive

Imagine a feedback form with two input fields: one for the usernameand another for feedback. There’s also a submitbutton for the form. We want the button to appear greyed outwhen either of the input fields is empty. Once both fields have data, the button should turn blue. Let’s explore how to achieve this using class binding.

class.<class-name>

• This approach binds specific classes (e.g., primary or secondary) directly to a condition.
• The syntax [class.<class-name>] ensures that the specified class (<class-name>) is added only when the condition evaluates to true.

<button 
  [class.primary]="username.length > 0 && feedback.length > 0" 
  [class.secondary]="username.length ==0 || feedback.length == 0"
>
  Submit
</button>

• [class.primary]: Adds the primary class if both username and feedback have data.
• [class.secondary]: Adds the secondary class if either of the fields is empty.
• Since only one condition can be true at a time, either primary or secondary is applied, but not both.

[class]

• Binds the entire class attribute to an expression.
• The expression determines which single class is applied at any given time.

Let’s say the logic to validate the form is moved to a method isFormValid() in the TypeScript code.

<button [class]="isFormValid() ? 'primary' : 'secondary'">
  Submit
</button>

• The expression isFormValid() ? 'primary' : 'secondary' dynamically evaluates to 'primary' when the form is valid, and 'secondary' when it is not.
• The result is directly assigned to the button’s class attribute.

ngClass Directive

• The ngClass directive allows you to dynamically apply multiple classes at once.

You can pass:

• An object with keys as class names and values as conditions.
• An array of class names.

<button [ngClass]="{'primary':username.length > 0 && feedback.length > 0,
                    'secondary':username.length == 0 || feedback.length == 0}">
  Submit
</button>

Conclusion:

We covered the three primary methods of class binding:

1. class.<class-name> for toggling individual classes,
2. [class] for directly assigning a single class,
3. ngClass for managing multiple classes and more complex conditions.

By leveraging these methods, you can build interactive and responsive Angular applications that react to user input and application state.

I hope this article has helped you understand how to use class binding effectively in your Angular projects. Happy coding!

Follow InterviewPro for more updates. Show your support on my YouTube channel too 😁.