How to Add/Remove Class Dynamically in Angular 12/11

Angular 12/11 add and remove class dynamically example. In this tutorial, you will learn how to add/remove class dynamically in angular 12/11.

Angular 12/11/10 Add and Remove Class Dynamically Example

1. Angular dynamically add and remove CSS Classes using Simple Class
2. Angular dynamically add and remove CSS Classes using ngClass
3. Angular dynamically add and remove CSS Classes using NgClass with ternary

Angular dynamically add and remove CSS Classes using Simple Class

Step 1 – Import Module

Visit src directory and open app.component.ts and add following code into it:

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

Step 2 – Add Code on View File

Now. visit src/app/app.component.html and add the following code into it:

<button 
    [class.active] = "isFavorite"
    >
    My Button
</button>

Angular dynamically add and remove CSS Classes using ngClass

Step 1 – Import Module

Visit src directory and open app.component.ts and add following code into it:

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

Step 2 – Add Code on View File

Now. visit src/app/app.component.html and add the following code into it:

<button 
    [ngClass]="{
        'btn-success': isFavorite,
        'btn-primary': !isFavorite
    }">
    My Button
</button>

Angular dynamically add and remove CSS Classes using NgClass with ternary

Step 1 – Import Module

Visit src directory and open app.component.ts and add following code into it:

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

Step 2 – Add Code on View File

Now. visit src/app/app.component.html and add the following code into it:

<button 
    [ngClass]="[ isFavorite ? 'btn-success' : 'btn-danger']"
    >
    My Button
</button>

Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Tutorials