Angular 11 Add Class Dynamically Example

In this article, we will show you how to add class dynamically in angular 11(Angular 11 Add Class Dynamically Example). 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. An isActive is the property that you will add in the app.component.ts file as a 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>