How to change ionic images when some condition occur

Ionic Framework ionic-v3
1

in my ionic project i want to display images with some condition. that is ,i receive a data from API, if it is " Landed" the image want to display with Green color, if “Cancelled” the image want to display with red color.how to possible.

   <div class="col" style="padding-top: 10px"><img src="assets/statusicon/arrive_onTime.png"></div>
      <label  style="padding-left: 40px;font-size: 18px">{{item.status | statusupdator}}</label><label style="padding-right: 5px;padding-left: 5px;">-</label><label>departs in 2 hr 4mins</label>
2

you can achieve that with the angular directive *NgIf

3

not only two conditions, have 5 conditions,(Landed,cancelled,delayed,scheduled,departed).

4

you can use if and else if… Check out this example

There are another directives, for example the [hidden] directive, is quite simple to use:

<div class="layer" [hidden]="statement"><h1>Hello</h1></div>

statement: boolean = true;

Now that div will be hidden

You can do too

<div *ngIf="isValid; then event else events">
            content here ...
          </div>
          <ng-template #event>other content here...</ng-template>
          <ng-template #events>other content here...</ng-template>
5

In your template:

<ion-label color={{labelColor}}></ion-label>

Or whatever you want to apply color to.

In your constructor:

export class StatusPage {
labelColor: string;
status: number;

  constructor()   {
   this.labelColor = "primary";
   this.status = 0;
}

    applyColor(){
     let channel = this.status;
  // I just like switching channels
         switch(channel) {
          case 0: {
           this.labelColor = "primary";
           break; 
          }

          case 1: {
           this.labelColor = "secondary";
           break;
          }
           
          case 2: {
           this.labelColor = "dark";
           break;
          }
 
          case 3: {
          this.labelColor = "light";
          break;
          }

          case 4: {
           this.labelColor = "danger";
           break;
          }

          default: {
           this.labelColor = "primary";
           break;
          }
     }
     
   }

You would have to apply your own methods of when and why the status changes. I use numbers because I like the idea of switching channels. Each number represents a status. The label, or whatever item you are applying the labelColor string to will change with the status, and you can avoid ngIf’s and hidden’s or whatever, depending on what you actually want to do of course. If you just want to change a color in order to update a status, this is a pretty good template to get you started I think.

I didn’t gather for sure if you were looking to do that, or present different images based on the status.