How to apply Boolean functions in ngStyle

Question

<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

Answer 1

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.