Thursday, September 25, 2025
HomeLanguagesAngularHow to Add/Remove Class Dynamically in Angular 12/11

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

RELATED ARTICLES

Most Popular

Dominic
32319 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6681 POSTS0 COMMENTS
Nicole Veronica
11854 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11910 POSTS0 COMMENTS
Shaida Kate Naidoo
6794 POSTS0 COMMENTS
Ted Musemwa
7070 POSTS0 COMMENTS
Thapelo Manthata
6753 POSTS0 COMMENTS
Umr Jansen
6761 POSTS0 COMMENTS