Angular NgClass Example | NgClass Directive In Angular

Hi All

Now, let's see example of angular ng class conditional example. you will learn ngclass with condition angular. you can see ngclass with condition in angular. we will help you to give example of *ngClass condition in angular example. You just need to some step to done angular ngClass directive example.

You can easily use ng class in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 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...