Get value from input type radio on click

Question

I have a button group in which I have tree inputs of type radio. The reason I use these, is that in order to get the style template I have bought for my project working I must use the exact same elements.

The button group is controlling the size on a dynamic table, and I need an event fired when a button (input) is pressed

<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)"  >
    <label class="btn btn-success">
           <input type="radio" name="options"> 10
    </label>
    <label class="btn btn-success">
          <input type="radio" name="options"> 20
    </label>
    <label class="btn btn-success active">
          <input type="radio" > 30
    </label>
</div>

I am using Angular 2 so I have tried to bind the inputs with values (not shown) without luck...

Update

The answer marked as solved below only partially solved my problem as I could only press each input once. To solve this I did the following:

 <div class="btn-group">
    <label class="btn btn-success">
        <input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
    </label>
    <label class="btn btn-success">
       <input type="radio"  style="display:none"  value="20" (change)="pageSizechanged($event.target)"> 20
    </label>
    <label class="btn btn-success">
        <input type="radio"  value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
    </label>
</div>

In the change event i pass the target along. I do this because i want to set checked to false:

pageSizechanged(target) {
    this._pagesize = target.value;
    target.checked = false;
    ...
}

Otherwise the inputs will remain checked and the change event will therefore not be fired. If someone have a better way to do this, please share :)

score 1 · Answer 1 · edited May 23 '17 at 10:31

I don't think radio inputs are currently well supported in angular2. (you seem to have to make your own component).

I have used them with a simple event handler on the (click) event, like so:

<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
    <input type="radio" 
        name="options" 
        (click)="selectedChoice = choice"
        [checked]="choice === selectedChoice" >
        No
</label>
<label>
    <input type="radio" 
        name="options" 
        [checked]="choice === selectedChoice"
        (click)="selectedChoice = choice > 
        Yes
</label>

So if we initialise with selectedChoice='Yes', the second radio button will be selected. The [checked] attribute makes sure the selected radio button is checked and the (click) directive triggers the model change.

score 1 · Accepted Answer · answered Aug 10 '16 at 09:30

Not entirelly sure what you want to achieve, but if I understood correctly.

You can bind the radio buttons with ngModel and avoid the current click-events entirelly, and rather react to changes. The following template works, just define your tableSize variable in the component class.

<div class="btn-group">
    <label class="btn btn-success">
        <input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
    </label>
    <label class="btn btn-success">
        <input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
    </label>
    <label class="btn btn-success active" >
        <input type="radio" [(ngModel)]="tableSize" value="30"> 30
    </label>
</div>

Current tableSize: {{tableSize}}

If you need an event, you can add a (change)="myFunc($event.target.value)" to the input tags as well.

Get value from input type radio on click

2 Answers2