Search code examples
htmlcssangulartypescriptangular-directive

How to make background color change when displaying, depending on object property in Angular

I have processed my BE objects with an Angular interface called Orderline and put them into an array called 'orderlines'. I want to display 'orderline.ct_no' on a green background if the 'change_color' property is true (it's a boolean field).

Component:

public displayOrderlines() {
this.service.getOrderLines().subscribe((response : Orderline[]) => {  
  this.orderlines = response;  

})

}

In .html I've tried this but it throws a big error, any ideas?

 <ng-container *ngFor="let orderline of orderlines">
 <div  class="row" >
    <div [style.backgroundColor]="{{ orderline.color_change }} ? 'green' : 
    'white' " 
     class="container">
        <div class="column">
            <p class="value" >{{ orderline.ct_no }}</p>
     </div>
 </div>
 </ng-container>
Solution

  • <div [style.backgroundColor]="orderline.color_change ? 'green' : 'white'" class="container">