Angular 14 dynamically add and remove CSS Classes using ngClass and custom directive

Angular 14 dynamically add and remove CSS Classes using ngClass and custom directive

Angular 14 add and remove classes dynamically. In this tutorial, you will learn how to add and remove classes dynamically in angular 14.

Add and remove dynamically CSS Classes using ngClass and custom directive in Angular

Use the following ways to add and remove css classes using ngClass and custom directive in angular 13 apps; as follows:

  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

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *