if then elseif then else then - statement in Angular 4

Question

I have to apply one class from my 4 available classes (yellow, green red and white) to my div as per status condition in my angular 4 project.

<div *ngIf="item.status=='pending'; then yellow 
elseif item.status=='completed'; then green ... else white">
div content...
</div>

Only one conditions in above statement can be true.

how to achieve this (if elseif elseif ... else statements in angular4) ?

Answer 1

Use ngClass

<div [ngClass]= { 
    'yellow-class' : item.status =='pending', 
    'green-class' : item.status == 'completed', 
    'white-class' : item.status != 'pending' && 'item.status' != 'completed' }>
</div>

Use ngStyle

In markup:

<div [style.color]=“getStatusColor(item.status)”>
</div>

or

<div [ngStyle]=“{color: getStatusColor(item.status)”>
</div>

In component:

getStatusColor(status) {
  switch (status) {
    case ‘pending’:
      return ‘yellow’;
    case ‘completed’:
      return green;
    default:
      return ‘white’;
  }
}