Ionic Conditional Text Color

ionic conditional text color

HTML

<ion-view view-title="{{employee.firstName }}">
    <ion-content has-header="true" padding="true">
        <div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
        </div>
    </ion-content>
</ion-view>

SO Demo

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {  $scope.employee = {    tStatus: 'Present',    name: 'Sameed'  }});

.green {  color: green;}.red {  color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><div ng-app="myApp" ng-controller="myCtrl">  <div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}  </div></div>

Change color of an ion-item on condition

The color will change based on your variable if you add square brackets around color.

<ion-note item-end [color]="!isShipButtonDisabled ? 'primary' : 'secondary'">

Adding the square brackets will tell angular to evaluate that expression.

how to change ionic text colors when some condition occur

Ok! Try this way.

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 [ngClass]='item.status'>{{item.status | statusupdator}}</p>
        </ion-card-content>
    </ion-card>

Inside you scss

page-example{
  .L {
    color: green;
  }
  .C {
    color: red;
  }
}

Let me know if having any problem. :)

Ionic color text depending on condition

Ionic 4
You can use the color property of the ion-text tag. Then your code could look somehow like this:

<ion-slide *ngFor="let loopValue of values">
  <ion-text [color]="viewValue == loopValue ? 'primary' : 'light'">
   {{loopValue}}
  </ion-text>
</ion-slide>

Ionic 3
Because there is no ion-text tag you should use ion-item instead.

Here is an example (also created one on stackblitz):

<ion-slides>
  <ion-slide *ngFor="let loopValue of values">
    <ion-item [color]="viewValue == loopValue ? 'primary' : 'light'">
      {{loopValue}}
    </ion-item>
  </ion-slide>
</ion-slides>

In this way, you do not have to replicate the whole tag with a *ngIf. Instead, the color of the ion-text depends on the ternary operator inside the color-property.

Ionic Vue: How do I change the text color of a selected option?

Ionic 5

You can use CSS Shadow Parts for that.

For the ion-select component, the exposed parts are icon, placeholder and text.

ion-select::part(text) {
  color: brown;
}

Unfortunately, I don't know to achieve that with earlier versions of Ionic.

It might work with latest versions of Ionic 4 though.

unable to change text color in ion-option when interface=popover

I was able to change the text color (of all ion-options) by inserting in app.scss

.item-radio.item ion-label {
    color: red; //your color here
}

For the selected option, insert a !important to the color attribute

.item-radio-checked.item ion-label {
    color: blue !important; //your color here for selected option
}

Setting the fill color attribute from css in Ionic 6

Correct me if I'm wrong but doesn't ionc icon and button have color property?

E.g you could do:

 <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")' [color]="tabSelected == 'colleagues'? 'pmblue' : ''" }">

---

Related Topics