Hi All
In this short tutorial we will cover an ngclass with condition in angular. you can see *ngClass condition in angular 9/8/7 example. i would like to share with you angular ngClass directive example. you will learn angular *ngclass example.
You can easily use ng class in angular 6, angular 7, angular 8 and angular 9 example.
In this post, i will give you example of ngClass and show you how to use it. i will give you total three way to use ngClass directive in angular appliction. so let's see bellow example on by one.
Example 1: ngClass with a String
In this example we can simply use ngClass and add two calss "btn" and "btn-success". you don't need to use any logic.
src/app/app.component.html
<h1>Angular ngClass Directive Example - ItSolutionstuff.com</h1>
<button [ngClass]="'btn btn-success'">Click Me!</button>
Example 2: ngClass with a Array
Here, we will add class array with ngClass.
src/app/app.component.html
<h1>Angular ngClass Directive Example - ItSolutionstuff.com</h1>
<button [ngClass]="['btn', 'btn-success']">Click Me!</button>
Example 3: ngClass with a Object
Here, we will add class object with ngClass.
src/app/app.component.html
<h1>Angular ngClass Directive Example - ItSolutionstuff.com</h1>
<button [ngClass]="{'btn': isButtonClass, 'btn-success': true}">Click Me!</button>
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
isButtonClass = true;
}
I hope it can help you...