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