How to change 4 text color in on click function,

Ionic Framework ionic-v3
1

Im using ionic 3 ,
I’m added the

Text one

Text two

Text three

When I Click on the text I need to change the color on text , I can do it normal java script but Im try to do it for a Ionic3, i cant do that, please help me to fix it How to change 4 text color in on click function,

Thanks

2

try google for ngClass in ionic, you will get answer

3

Sir im Try it look my code but not work

<div class="row">
  <div  class="col right-border">
    <div  text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
      <h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
    </div>
  </div>
  <div  class="col bottom-border">
    <div text-center [ngClass]="getTextColor('text2')"  (click)="setSelectedText('text2')">
      <h2  class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
    </div>
  </div>
</div>
<div class="row">
  <div  class="col top-border">
    <div  text-center [ngClass]="getTextColor('text3')"  (click)="setSelectedText('text3')">
      <h2  class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
    </div>
  </div>
  <div class="col left-border">
    <div  text-center>
      <h2  class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
    </div>
  </div>
</div>

 private selecteTextId :string;

 setSelectedText(textId:string) {
     this.selecteTextId = textId;
 }

 getTextColor(textId:string):string{
   return this.selecteTextId == textId? "highlight-color" : "";
 }

.highlight-color {
  color:blue;
}
4

this is not right way to use ngClass
ngclass is same as if statement
you have to write condition in ngClass if it is true then it will apply your css

 <div  text-center [ngClass]="highlight-color:text==1" (click)="setSelectedText('text1')">
 <div  text-center [ngClass]="highlight-color:text==2" (click)="setSelectedText('text2')">
 <div  text-center [ngClass]="highlight-color:text==3" (click)="setSelectedText('text3")">
 <div  text-center [ngClass]="highlight-color:text==4" (click)="setSelectedText('text4')">

private selecteTextId :string;
text:any;
 setSelectedText(textId:string) {
     this.selecteTextId = textId;
     this.text=textId;
 }
1 Like
6

Thanks for the guide me sir

1 Like
7

you know why it says " Error: Template parse errors:
Parser Error: Unexpected token ‘:’ at column 16 in [highlight-color:text==1]" ? i’m using ionic 3

8

have you declare those variable in ts file which is used in ngclass ?

9

I’ve declared text as public text: any;
and in the css is highlight-color, what else more?

10

may i show your html template ?

11 
<ion-item text-wrap style="font-size:.3cm;">
                    <ion-row (click)="setSelectedText('text1')" [ngClass]="highlight-color:text==1" >
                        <ion-col col-6> <h4  > Upload chart data 1 </h4> </ion-col> 
                       <ion-col col-6> <h4  > {{data1}}</h4> </ion-col> 
                    </ion-row>
                    <ion-row  (click)="setSelectedText('text2')" [ngClass]="highlight-color:text==2" >
                        <ion-col col-6> <h4>  Upload chart data 2  </h4> </ion-col> 
                        <ion-col col-6> <h4  > {{data2}}</h4> </ion-col> 
                    </ion-row>
                    <ion-row  (click)="setSelectedText('text3')" [ngClass]="highlight-color:text==3" >
                        <ion-col col-6> <h4 >Upload chart data 3  </h4> </ion-col>
                        <ion-col col-6> <h4  > {{data3}}</h4> </ion-col>  
                    </ion-row> 
  </ion-item>
12

i’m not using buttons cuse I think looks better using just text in columns

13

and may i show your setSelectedText() function.
is it same as mine ?

14

just the same you answered but public

export class MyPage {
  constructor(...){...}

  public selecteTextId :string;
  public text:any; 
  setSelectedText(textId:string) {
      this.selecteTextId = textId;
      this.text=textId;
  }

css

    .highlight-color{
        color:blue;
    }
15

ok now pass 1,2,3 in setSelectedText() from html.
(click)=“setSelectedText(1)”

16

still not work :frowning: thanks for answering btw

17

I solved it using instead of [ngClass] I used :

[class.highlight-color]=“text==1”

1 Like