how to add class dynamically in angular 10

In this article, we will show you how to add class dynamically in angular 10. in this example, we will use the NgClass directive for dynamically add remove class in angular. you can easily create and learn through our article.

In this example, we will take an isActive variable. A isActive is the property that you will add in the app.component.ts file as boolean. so you can see below following example

src/app/app.component.ts

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

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

  constructor() {}
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

isActive: boolean = true;

constructor() {}

}

src/app/app.component.html

<button [ngClass]="{'active': isActive}" Submit </button>

1	<button [ngClass]="{'active': isActive}" Submit </button>