Angular NgClass Conditional Example

By Hardik Savani | July 16, 2020 | Category : Angular


This post is focused on angular ng class conditional example. it's simple example of angular ngclass with multiple conditions. you'll learn angular 9 ng class conditional. if you want to see example of ng class with multiple conditions angular 9 then you are a right place. Let's get started with angular ngclass multiple conditions with and operator.

In this tutorial, i will show you some example for how to add conditional class in angular application. you can easily add multiple condition in ngClass directive in angular application.

i already posted with simple example of ngClass, you can also read that article Angular NgClass Example.

You can easily use ngclass with condition in angular 6, angular 7, angular 8 and angular 9 example.

Here, let's see how to use Conditional class with angular application one by one:

Example 1: ngClass with Condition

src/app/app.component.html

<h1>Angular NgClass with Condition - ItSolutionstuff.com</h1>

<button [ngClass]="{'btn btn-success': true}">Click Me!</button>

Example 2: ngClass with multiple condition

src/app/app.component.html

<h1>Angular NgClass with Condition - 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 {

name = 'Angular';

isButtonClass = true;

}

Example 3: ngClass with multiple condition more

src/app/app.component.html

<h1>Angular NgClass with Condition - ItSolutionstuff.com</h1>

<button [ngClass]="{

'btn': true,

'btn-success': true,

'btn-flat': true}">Click Me!</button>

Example 4: ngClass with multiple condition(Real Field)

src/app/app.component.html

<h1>Angular NgClass with Condition - ItSolutionstuff.com</h1>

<button [ngClass]="{

'btn': myNumbers.one > 10,

'btn-success': myNumbers.two > 20}">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 {

name = 'Angular';

myNumbers = {one: 11, two: 21};

}

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: