I am dynamically displaying cards by looping through *ngFor. I want to update the card background color based on some condition.For e.g. If some condition satisfies, the cards background is green in colour. Else, the card background color is unchanged or changed to red color. How to achieve this dynamic behavior in Angular 2? I tried using *ngIf, but then the layout got messed up. I want only the background color to be changed based on the condition without affecting any layout changes. For responsive behavior I am using flex layout.
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px;
padding-top: 25px;
margin: auto;
justify-content: center">
<md-card fxFlex.gt-md="45"
fxFlex.md="45"
fxFlex.sm="auto"
fxFlex.xs="100"
*ngFor="let data of myArray"
[style.background]="'lightBlue'"
style="margin:5px;">
<md-card-content>
<h1></h1>
<h2></h2>
<h2></h2>
</md-card-content>
</md-card>
</div>