ngClass directive in Angular

💻 Tech

[ngClass] directive in Angular allows to conditionally set CSS classes based on the variable value in the Angular component.

// Sample.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  templateUrl: './Sample.component.html',
  styleUrls: ['./Sample.component.css']
})
export class SampleComponent {
  successful: boolean = true;
  msg: string
}

<!-- Sample.component.html -->
<div [ngClass]="{
	'success-background': successful,
	'failed-background': !successful
}">
   {{ msg }}
</div>