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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example