CODEWITHSUNDEEP
angularangular6angular5angular7angular8
Firdaus
Firdaus

Reputation: 143

Angular 8: How to get selected data from Dynamic radio button

How to get data from Dynamic radio button(radio button is generate from json data). The radio button is successfully display but how i can get the selected data from dynamic radio button.

Example Json Data:

[{Key : color,Values : [{Value : red}]}]

product.component.ts

   <div class="form-group product__option" *ngFor="let item of product.productAttr; let i = index">
                    <label class="product__option-label">{{item.key}}</label>
                    <div class="input-radio-label">
                        <div class="input-radio-label__list">
                            <label *ngFor="let value of item.values; let i = index">
                                <input type="radio" id="{{value.key}}" value="{{value.value}}" name="{{item.key}}" (change)="onItemChange($event)">
                                <span>{{value.value}}</span>
                            </label>
                            
                        </div>
                    </div>
                </div>

Upvotes: 0

Views: 2401

Answers (3)

chgav007
chgav007

Reputation: 55

You need to use (change) event on dynamically created radio button and then you can pass values to it and then use it on ts file.

eg.

HTML

 <input class="option" type="radio" value="{{optionsVal.id}}" 
                      id="opt_{{optionsVal.id}}" name="quizOption"
                      (change)="radioFun( optionsVal.id)"
                       />

TS

 radioFun(optionID: any) {
console.log(optionID)
}

So that you can also save and push values to any particular array as you wish on radioFun function.

Upvotes: 0

Arunkumar Ramasamy
Arunkumar Ramasamy

Reputation: 781

You need to implement the onItemChange method in your component.ts file.

onItemChange(itemKey, itemValue) { console.log(itemKey + ' ' + itemValue); }

ref: https://stackblitz.com/edit/angular-ipm7s6?file=src%2Fapp%2Fapp.component.ts

Upvotes: 0

CodeWarrior
CodeWarrior

Reputation: 5176

You need to implement the onItemChange method in your product.component.ts file.

onItemChange(value){
   console.log(value);
}

Upvotes: 1

Related Questions