How to change 4 text color in on click function,


#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;
 }

#6

Thanks for the guide me sir