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

i hope it can help you...