Angular Ngclass with Ternary Operator Example

Hi,

Today, ngclass with ternary operator in angular is our main topic. if you have question about angular ngclass ternary operator then i will give simple example with solution. you will learn ternary operator ngclass angular 12. This article goes in detailed on angular 12 ngclass ternary operator. Let’s get started with angular ngclass with ternary operator.

I will give you simple example of how to use ternary operator with ngclass in angular. you can use this example with in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 version app.

Let’s see bellow example:

app.component.html

<h1>angular ngclass ternary operator</h1>

<button [ngClass]="status == 'Active' ? 'active-class' : 'inactive-class'">Button</button>

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

status = 'Active';

}

app.component.css

.active-class {

color: green;

}

.inactive-class {

color: red;

}

Ouput:

Angular Ngclass with Ternary Operator Example

i hope it can help you…

1 thought on “Angular Ngclass with Ternary Operator Example”

Leave a Comment