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, angular 9, angular 10, angular 11, angular 12 and angular 13 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...