Dynamically Adding Classes with ngClass in Angular

Angular's ngClass directive allows you to conditionally apply CSS classes to HTML elements based on data or expressions within your component. This provides a powerful way to control the element's appearance dynamically.

Template:

<div [ngClass]="myClasses">This element's classes change dynamically!</div>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  myClasses: any;
  isActive: boolean = false;

  constructor() {
    this.myClasses = {
      'highlight': this.isActive, // Class applied based on condition
      'large': true // Always …

angular app apply change control core css data element html import ngclass template webdev