Angular2: RadioButton change event is not binding
10,756
Solution 1
Using ng2-bootstrap,
<div class="btn-group col-lg-2">
<label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label>
</div>
In .ts file,
Added
import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
In
@Component
annotation, passed it asdirectives: [ButtonRadioDirective]
.
It works fine. Hope it will work for you.
Solution 2
With Angular 2 RC2 it’s no longer needed to create the RadioButtonState:
Radio Buttons can now share FormControl instance
<form #f="ngForm">
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>
And:
class MyComp {
food = 'fish';
}
Source: 5thingsangular - Issue #8
Solution 3
Two way binding without a library:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items">
<input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" />
{{yourLabelText}}
</label>
</div>
Author by
Admin
Updated on June 07, 2022Comments
-
Admin almost 2 years
Here, I want to simply bind RadioButton with change event. Not using any library.
Following works fine.
<input type="radio" name="test" value="A" (change)="onPropertyChange('test')"> <input type="radio" name="test" value="B" (change)="onPropertyChange('test')">
But this one is not :
<div class="btn-group col-lg-2" data-toggle="buttons" > <label *ngFor=" let app of applications; let i = index; " class="btn btn-default " [ngClass]="{'active':( ticket.app == app)}"> <input type="radio" id="app{{i}}" name="app" value="{{i}}" checked="{{ ( ticket.app == app ) ? 'checked' : ''}}" (change)=" onPropertyChange('app')" > {{app}} </label> </div>
While binding change event to label, it is giving me old value.
Can anyone suggest right approach?