Angular NgClass Conditional Example

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, angular 13, angular 14, angular 15, angular 16 and angular 17 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...