Thursday, August 28, 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
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS