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 and angular 10 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: