Angular 9/8/7 NgClass Directive Example

Hello Devs, 

In this tutorial, we will learn Angular 9/8/7 NgClass Directive Example

In this section,we will 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.

Follow this step by step guide below. 

Example 1: ngClass with a String:

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:

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:

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;

  

}

May this example help you.