how to add class dynamically in angular 10

October 2, 2020 XpertPhp Comments 0 Comment

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>

Please follow and like us:

Related posts: