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.