CODEWITHSUNDEEP
ionic-frameworkcolors
RoDev
RoDev

Reputation: 61

Change color of an ion-item on condition

I would like to change color of my ion-item based on some condition. (Making an ion-item non-clickable or non-editable). Have added the code to make it non-clickable ,however the color of the text is still blue color which will confuse user to click on it.

Have tried using the ternary operator but that was not working.

<ion-item color="light" (click)="!isShipButtonDisabled && navigateBack()">
  <p>Transfer Orders</p>
  <ion-note item-end color="!isShipButtonDisabled ? 'primary' : 'secondary'">
    {{transferOrderCount}}</ion-note>
</ion-item>

Any help would be hugely helpful!

Upvotes: 0

Views: 1188

Answers (1)

Cameron
Cameron

Reputation: 203

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.

Upvotes: 2

Related Questions