Angular Ngclass with Ternary Operator Example

By Hardik Savani September 7, 2021 Category : Angular


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 and angular 12 version app.

Let's see bellow example:


<h1>angular ngclass ternary operator</h1>

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


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


selector: 'my-app',

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

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


export class AppComponent {

name = 'Angular ' + VERSION.major;

status = 'Active';



.active-class {

color: green;


.inactive-class {

color: red;



i hope it can help you...

Tags :