How to apply Boolean functions in ngStyle

Issue

<div *ngFor= “ let singleorder of order.order”>
    <p [ngStyle]="
      'color':(single order.status === 'CONFIRM' )? 'green' : 'red' ,
       'background' : (single order.status === 'CONFIRM')? '#e4f4eb': '#f7d0c7'
    }">. {{single order.status}}>

</div>

I am expecting the background color and color to be green when the value of status is CONFIRM and also show red when the value is CANCELLED

Solution

Based on the documentation, this is the correct syntax (note the curly braces).

<p [ngStyle]="{
  'color': singleorder.status === 'CONFIRM' ? 'green' : 'red',
  'background': singleorder.status === 'CONFIRM' ? '#e4f4eb': '#f7d0c7'
}">
  {{singleorder.status}}>
</p>

Since you're basing multiple style properties on the same condition, it would probably be cleaner to define a couple of CSS classes and use ngClass or use class binding.

Answered By - Robby Cornelissen