Angular - Class Binding

Class binding is allows you to conditionally apply a CSS class to an HTML element based on a component property. This is useful when you want to dynamically change styles depending on application state.

Example 1: Basic Class Binding

In this example, the active class will be applied to the <div> only if the isActive property in the component is true.

  
			app/src/app.component.ts 
		

		import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  isActive = true;
}
		

   
			app/src/app.component.css 
		
		.active {
    color: green;
}

   
			app/src/app.component.html 
		
		<div [class.active]="isActive">Welcome</div>

Run the Angular Application use the command is given below

ng serve

Copy the URL: http://localhost:4200/ and run in your browser

Output

The word "Welcome" will appear in green color, because the isActive property is true and therefore the active class is applied.

Example 2: Multiple Class Binding

Angular's ngClass directive allows you to bind multiple CSS classes to an element conditionally using object syntax. Each key in the object is a class name, and its corresponding value is a Boolean expression that determines whether the class should be applied.

In this example, the active class will be applied if isActive is true, and the disabled class will be applied if isDisabled is true.

  
			app/src/app.component.ts
		

		import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  isActive = true;
  isDisabled = false;
}
		

   
			app/src/app.component.css 
		
		.active {
  color: green;
}

.disabled {
  opacity: 0.5;
}

app/src/app.component.html

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">Welcome</div>

Output

The text "Welcome" will appear in green (because isActive is true, so active class is applied).
The disabled class is not applied, since isDisabled is false, so the element will not have reduced opacity.

Example 3: Dynamic Class Binding with Ternary Operator

In this example, we use a ternary operator within Angular's [class] binding to dynamically apply one of two classes based on a condition. This is useful when you want to switch between two styles based on a single property.

  
			app/src/app.component.ts
		

		import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  isActive = true;  // Change this value to toggle between 'active' and 'inactive'
}
		

app/src/app.component.html

<div [class]="isActive ? 'active' : 'inactive'">
    The status of this div is: {{ isActive ? 'Active' : 'Inactive' }}
</div>

The .active class will apply a green text color.
The .inactive class will apply a red text color.
  
			app/src/app.component.css
		

		.active {
    color: green;
}
  
.inactive {
    color: red;
}
		

Output

If isActive is true:

The text will say: "The status of this div is: Active"
The text will appear in green (.active class applied)

If isActive is false:

The text will say: "The status of this div is: Inactive"
The text will appear in red (.inactive class applied)

Angular Class Binding ternary operator Output

Example 4: Using ngClass for More Complex Conditions

The ngClass directive is useful for applying dynamic classes based on more complex conditions.

  
			app/src/app.component.ts
		

		import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  isActive = true;
  isDisabled = false;
  isHighlighted = true;

  // Method returning an object with conditions
  getClasses() {
    return {
      active: this.isActive,
      disabled: this.isDisabled,
      highlight: this.isHighlighted
    };
  }
}
		

Apply the class active if isActive is true.
Apply the class disabled if isDisabled is true.
Apply the class highlight if isHighlighted is true.
  
			app/src/app.component.css
		

		.active {
    color: green;
  }
  
.disabled {
    opacity: 0.5;
    pointer-events: none;
}
  
.highlight {
    background-color: yellow;
}
		

app/src/app.component.html

<div [ngClass]="getClasses()">
    This div changes classes based on component state.
</div>

Output

Prev Next