Angular NgClass – How to Add Dynamic Class in Angular 9/8?

Angular NgClass – How to Add Dynamic Class in Angular 9/8?

In this post we will give you information about Angular NgClass – How to Add Dynamic Class in Angular 9/8?. Hear we will give you detail about Angular NgClass – How to Add Dynamic Class in Angular 9/8?And how to use it also give you demo for it if it is necessary.

In this Angular 9/8 NgClass Example, i will show you how to add dynamically add class in angular 9/8 using ng class. we will apply dynamic CSS classes to the HTML element using the NgClass directive in angular 9/8. you can learn angular 9/8 add class dynamically using bellow examples.

There are several way you can add dynamic class in angular 8. there is a best way to implement using NgClass in angular 8. i will give several way to use dynamically classes in angular 8.

If you want to add dynamically css then you can follow this example: How to add dynamic css in Angular 8?.

Now you can see bellow example to adding dynamic class in angular 8.

Example 1: Simple NgClass

You can see bellow example app.component.ts and app.component.html file code:

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

isFavorite: boolean = true;

}

app.component.html

<button

[ngClass]="{

'btn-success': isFavorite,

'btn-primary': !isFavorite

}">

My Button

</button>

Now you can see output, it will add “btn-success” class because, itFavorite variable is true.

Example 2: Simple class

You can see bellow example app.component.ts and app.component.html file code:

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

isFavorite: boolean = true;

}

app.component.html

<button

[class.active] = "isFavorite"

>

My Button

</button>

Now you can see output, it will add “active” class because, itFavorite variable is true.

Example 3: NgClass with ternary

You can see bellow example app.component.ts and app.component.html file code:

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

isFavorite: boolean = true;

}

app.component.html

<button

[ngClass]="[ isFavorite ? 'btn-success' : 'btn-danger']"

>

My Button

</button>

Now you can see output, it will add “btn-success” class because, itFavorite variable is true.

Example 4: NgClass with Array

You can see bellow example app.component.ts and app.component.html file code:

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

myProducts = [

{

id: 1,

title: 'Gold',

status: 'active'

},

{

id: 2,

title: 'Silver',

status: 'pending'

},

{

id: 3,

title: 'Bronze',

status: 'expired'

},

]

}

app.component.html

<div *ngFor="let product of myProducts">

<p [ngClass]="{

'text-success':product.status === 'active',

'text-primary':product.status === 'pending',

'text-danger':product.status === 'expired'

}">{{ product.title }}

</p>

</div>

Now you can see output…

Now you can use it as you want.

I hope it can help you….

Hope this code and post will helped you for implement Angular NgClass – How to Add Dynamic Class in Angular 9/8?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

  +  82  =  83

We accept paid advance and paid guest Posting on our Site : Contact US