Angular 9/8/7 NgClass Directive Example

April 25, 2020 | Category : Angular

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...