[SOLVED] Can ngClass use ternary operator in Angular 2?


In Angular 1, the code below works well.

<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">

But when I try to do similar thing in Angular 2. It does not work.

I already added directives: [NgClass]

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

How should I write in Angular 2, thanks!

EDIT: It was my mistake, I accidentally added { } to the whole varA === varB ? 'css-class-1' : 'css-class-2'. So ngClass still can use ternary operator in Angular 2.


Yes. What you wrote works:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">


The result of the expression on the the right-hand side has to evaluate to one of the following:

  • a string of space-delimited CSS class names (this is what your expression returns)
  • an Array of CSS class names
  • an Object, with CSS class names as keys, and booleans as values

Maybe you had some other error in your code?

Answered By – Mark Rajcok

Answer Checked By – Clifford M. (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *