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?