Recently, I developed an app that includes a survey page. Each question in the survey has two buttons for the user to select: Yes or No.
However, as a newcomer to using Ionic, I encountered an issue after building the code and checking the output. One of the buttons appears to be in a clicked state by default, which is not the desired behavior. In the screenshot below, you can see the current situation when the app runs. Ideally, the buttons should be clickable and have a white background. I'm seeking assistance with this matter as I still find it confusing to work with Ionic.
https://i.sstatic.net/M2dUZ.png
Below are the snippets of code I utilized:
.html -edited
<ion-row>
<ion-col size-md = "6">
<ion-button (click)="onYesQ1()" [ngClass]="enoughTime ==='Yes' ?'btn-pressed':'btn-unpressed'" [class]="btn-pressed" fill = "clear">
<div class = "parentElement">
<img src = "{{myYesImage|staticpath}}"/>
<br><br><p class = "btn-work"><b>Yes</b></p>
</div>
</ion-button>
<ion-button (click)="onNoQ1()" [ngClass]="enoughTime ==='No' ?'btn-pressed':'btn-unpressed'" class="" 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>
.scss
.btn-pressed{
vertical-align: middle;
width: 126px;
height: 90px;
left: 35.7px;
background: #0E82C1;
border: 1px solid #979797;
box-sizing: border-box;
box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.3);
border-radius: 23px;
color: white;
}
.btn-unpressed {
vertical-align: middle;
width: 126px;
height: 90px;
left: 35.7px;
border-radius: 25px;
box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.12), 0px 10px 24px rgba(0, 0, 0, 0.24);
}
.ts -edited
@Input() enoughTime : string = "";
Error: