Beginner: select one of the two buttons in list item and change the color to green


#1

Hi all,

I just started with ionic and now I having a problem and cannot find a way how to fix this. I have a list with items where the user needs to click on one of the two buttons in the item. When clicking for example on button answer A the color should be changed into green. You can ony select one of them. I’ts like a radio buttons only then for button.

My template is:

<ion-list>
	<ion-item> 
	 <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image11.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer A</button>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image12.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer B</button>
		</ion-col>
	  </ion-row>
	</ion-item>
	<ion-item> 
	 <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image21.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer A</button>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image22.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer B</button>
		</ion-col>
	  </ion-row>
	</ion-item>
	<ion-item> 
	 <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image31.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer A</button>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col col-4>
			<ion-thumbnail>
			  <img src="image32.jpg">
			</ion-thumbnail> 
		</ion-col>
		<ion-col>
		  <button full ion-button small>Answer B</button>
		</ion-col>
	  </ion-row>
	</ion-item>
</ion-list>
(click)="buttonClicked()" [class.active]="expression"
    .selected {
        background-color: green;
    }

I tried to make an expression based on the output of the buttonClicked function what should select the class in the css. I don’t know if this is the right way to do this but I hope that somebody can help me to push me in the right direction.


#2

I posted a fairly similar example recently. Perhaps you can build on that.