[Fixed] Change currency based on checked radio in angular

Issue

When users click on the currency symbol, I want to change the second row’s currency symbol and amount. The amount for every currency is different.
Here is a stackblitz

<input type="radio" id="lari" name="jeff"><label for="lari">₾</label>
  <input type="radio" id="dollar" name="jeff"><label for="dollar">$</label>
  <input type="radio" id="euro" name="jeff"><label for="euro">€</label>
</div>

<input type="radio" id="25" name="cash"><label for="25">
  <span>25 0000</span>
  <span>$</span>
</label>
<input type="radio" id="50" name="cash"><label for="50">
  <span>50 0000</span>
  <span>$</span>
</label>
<input type="radio" id="75" name="cash"><label for="75">
  <span>75 0000</span>
  <span>$</span>
</label>
<input type="radio" id="100" name="cash"><label for="100">
  <span>100 0000</span>
  <span>$</span>
</label>

Solution

Something like this will work. https://stackblitz.com/edit/angular-material-starter-r1hjgp?file=app/app.component.html

Basically it stores the values in a currencymap. Then the selected value is used to select the right currency.

currencyMap = {
    'GEL': '₾',
    'USD': '$',
    'EUR': '€'
}

<span>{{currencyMap[selectedValue]}}</span>

I assume your form structure is this weird because you omitted irrelevant info?

Leave a Reply

(*) Required, Your email will not be published