Angular NgClass Example | NgClass Directive In Angular 10/9/8

By Hardik Savani | March 30, 2020 | Category : 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 and angular 10 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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: