I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain its default appearance. However, I encountered a problem where clicking one button also changes the color of the other buttons to blue, instead of just the selected one. I attempted to implement a solution from this resource, but it did not resolve the issue as all buttons still turned blue upon click. As a beginner in learning Ionic, any assistance would be greatly appreciated.
The following image shows the default appearance of the button:
https://i.stack.imgur.com/No1Rj.png
After a user taps an answer, only that specific button should have a blue background. Unfortunately, when a button is tapped, both buttons end up turning blue.
https://i.stack.imgur.com/cYdjp.png
Below are the code snippets:
.html
<ion-row>
<ion-col size-md = "6">
<ion-button id = "q1-yes-on" [ngClass]= "isClicked('q1-yes-on') ? 'btn-pressed' : 'btn-unpressed'" id = "q1-yes-off" (click) = "onClick('q1-yes-off')" fill = "clear">
<div class = "parentElement">
<img src = "{{myYesImage|staticpath}}"/>
<br><br><p class = "btn-work"><b>Yes</b></p>
</div>
</ion-button>
</ion-col>
<ion-col>
<ion-button id = "q2-yes-on" [ngClass]= "isClicked('q2-yes-on') ? 'btn-pressed' : 'btn-unpressed'" id= "q2-yes-off" (click) = "onClick('q2-yes-off')" fill = "clear">
<div class = "parentElement">
<img src = "{{myNoImage|staticpath}}"/>
<br><br><p class = "btn-work"><b>No</b></p>
</div>
</ion-button>
</ion-col>
</ion-row>
.ts
isClick: boolean = false;
private _id: string;
isClicked(_id){
console.log(_id);
return this.isClick
}
onClick(_id){
console.log(_id);
this.isClick=!this.isClick;
}