0

Whats the best approach to detect which radio has been selected in the following example?

<label for="apple">
    <input id="apple" type="radio" name="fruits" value="apple" class=""/>
    <span>Apple </span>
    <SomeComponent>
</label>
<label for="mango"> 
   <input id="mango" type="radio" name="fruits" value="apple" class=""/>
   <span>Mango </span>
   <AnotherComponent>    
</label>

I want to be able to add a background to the selected label using ngClass. I could also use that variable for other things (such as disabling 'SomeComponent' or 'AnotherComponent' in the example.

SeaMonster
  • 108
  • 5

1 Answers1

0

Just update a variable when change event fires for each radio and then use ngClass to apply background color to each label based on the variable's value.

Here you have an example: Stackblitz

Daniel Stefanelli
  • 457
  • 4
  • 14
  • Thank you for your response, this is a simple enough approach. I guess if I need another radio box then could use an ngFor to keep track of indexes and which one is selected. – SeaMonster Jun 22 '21 at 08:20