How to fetch radio button value dynamically in angular 2?

Question

Need to display radio button values dynamically from array, and fetch the value of it based on which I need to display a <div>. please find the code below

html

<div *ngFor = "let fruit of fruits"
<input type = "radio"/>{{fruit}}>
</div>

component.ts -> contains the following array

fruits : string[] = ["apple", "mango"];

With this I am getting the radio buttons apple and mango.Need to get the value of the selected radio button (in assigning[(ngModel)], value) and Need to display another div based on individual selections. Please guide me on this

Sajeetharan · Accepted Answer · 2017-06-05 02:26:00Z

2

You can use [value]

<div *ngFor="let fruit of fruits">
    <input type="radio" formControlName="options" [value]="fruit">
    {{fruit}}
</div>`

answered Jun 5, 2017 at 2:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akhilesh Kumar · Accepted Answer · 2017-08-18 10:37:28Z

0

<div *ngFor="let fruit of fruits">
<input type="radio" [value]="fruit" 
(change)="selectedFruitValue(fruit)">
{{fruit}}
</div>

in your ts file
first define a variable
i.e
fruitValue:string

and then write a function

selectedFruitValue(fruit){

this.fruitValue = fruit;

//for checking purpose
 console.log('fruit value is':+this.fruitValue);

}

answered Aug 18, 2017 at 10:37

Akhilesh Kumar

551 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to fetch radio button value dynamically in angular 2?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related