CODEWITHSUNDEEP
cssangularionic-frameworkionic3
El Dude
El Dude

Reputation: 5618

Ionic color text depending on condition

I have a very makeshift solution to highlight text in a small slider after user tap.

<ion-slide *ngFor="let loopValue of values">
<div *ngIf="viewValue == loopValue">
    <b>
        {{loopValue}}
    </b>
</div>
<div *ngIf="viewValue != loopValue">
    {{loopValue}}
</div>
</ion-slide>

Here, I highlight the selection by wrapping the slide content into a bold bracket. However, I rather would like the font to be ionic defined primary or secondary color to highlight user tap. How?

Upvotes: 1

Views: 1461

Answers (1)

Marian Kl&#246;sler
Marian Kl&#246;sler

Reputation: 670

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.

Upvotes: 3

Related Questions