How to change ionic text colors when some condition occur

in my ionic project i want some conditional colors for text. that is ,i receive a data from API, if it is " Landed" the text want to display in Green color, if “Cancelled” the text want to display in red color.how to possible.

Arrival.ts

export class ArrivalsPage {
  objectData: any = [];
.................
...................
  }
  get_arrivalflights() {
    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
        console.log(response);
        this.objectData = response.flightStatuses;

        //this.publishedDeparture = response.flightStatuses.operationalTimes;
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.makeGetRequest(communicationParams);
  }

Arrival.html



<ion-card *ngFor= "let item of objectData" (click)="goToArrivalflightDetails(item,item.operationalTimes.publishedArrival.dateLocal,item.operationalTimes.actualRunwayArrival.dateLocal,item.airportResources.departureTerminal);">

    <ion-card-content>
      <p><span>{{item.departureAirportFsCode}}</span></p>
      <p><span>{{item.carrierFsCode}}{{item.flightNumber}}</span></p>
      <!--<P>{{item.operationalTimes.publishedArrival.dateLocal | mattDamon}}</P>-->
      <p>{{item.status | statusupdator}}</p>

    </ion-card-content>

  </ion-card>

statusupdator is pipe:



@Pipe({
  name: 'statusupdator'
})
export class StatusUpdater {
  transform(value, args) {
    let status=value;
    if(value=='L')
    {
      status='Landed'
    }
    if(value=='A')
    {
      status='Estimated'
    }
    if(value=='C')
    {
      status='Cancelled'
    }
    if(value=='S')
    {
      status='Scheduled'
    }
    if(value=='U') {
      status = 'Unknown'

    }
    return status;
  }

in this code i want to display <p>{{item.status | statusupdator}}</p> in colors when item.status will occur the condition.

Standard Angular. Use ngStyle or class.

Please make get_arrivalflights() more idiomatic. Name it according to convention, and use Promises and Observables instead of callbacks.

i think u can’t understand my question correctly
my project is flight details showing application.so value of {{item.status}} is will different value in different states. ie, (Landed,Scheduled,Cancelled,delayed,Departed …etc…). when the state is “Landed”

{{item.status | statusupdator}}

want to display in green color, when “Cancelled” - red,when “scheduled” - orange when “departed” - green . ie mean different color in different states.

??? What’s stopping you from using ngStyle?

1 Like