Ionic Text color change onclick - ionic-framework

Question

I'm a beginner in Ionic 3.
I have a 4 text in same color, I'm trying to make when I click on the 4 text at for time I want to change color.
Example
I click on 1st text, then I want to change it black color
I click on text 2, then I want to change black color and 1st text is set a default color,
Please help me to fix this issue
<div class="row">
<div class="col right-border">
<div text-center>
<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>
<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>
<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>
</div>

Answer 1

You can use [ngClass] attribute to achieve this. This can be used to dynamically return the class name as per the last clicked text. The code will be something like below.
<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>
In controller
private selecteTextId :string;
setSelectedText(textId:string) {
this.selecteTextId = textId;
}
getTextColor(textId:string):string{
return this.selecteTextId == textId? "highlight-color" : "";
}
In scss file
.highlight-color {
color:blue;
}