Radio button not working properly in Angular 2

Question

We have an angular2 component where we have certain radio buttons. I check the radio buttons on certain conditions.

The HTML code for radio buttons goes as:

<span class="radio-switch-group">
    <label>
	<input type="radio" name="radioView" id="All" (click)="onBtnClick('All')" [checked]="currentTab === 'All'">
	<span class="radio-label">ALL Cars</span>
    </label>
    <label>
        <input type="radio" name="radioView" id="Honda" (click)="onBtnClick('Honda')" [checked]="currentTab === 'Honda'">
        <span class="radio-label">Honda</span>
    </label>
</span>

The ts file is as follows:

     export class CarComponent implements OnInit{
         @Input() public currentTab: string = 'All';

         public onBtnClick(carType: string){
             this.currentTab = carType;
         }

         public ngOnInit() {
             this.currentTab = 'All';
         }
     }

When I instantiate this component in a tab view from another component the radio button isnt checked even when the currentTab is set to 'All'

this code is worked fine for me, please check your code anywhere else the checkbox value is clearing — sainu
– sainu, Commented May 8, 2017 at 11:49
I am instantiating this component in a tab, it doesn't work under that scenario. — hannah
– hannah, Commented May 8, 2017 at 14:08

Daniel Cooke · Accepted Answer · 2017-05-08 16:01:13Z

1

Try using [value] attribute binding of the input. IIRC using [selected] or [checked] in Angular is essentially doing the following.

if ([checked]===[value])

<span class="radio-switch-group">
    <label>
	<input type="radio" name="radioView" id="All" (click)="onBtnClick('All')" [value]="'All'" [checked]="currentTab">
	<span class="radio-label">ALL Cars</span>
    </label>
    <label>
        <input type="radio" name="radioView" id="Honda" (click)="onBtnClick('Honda')" [value]="'Honda'"[checked]="currentTab">
        <span class="radio-label">Honda</span>
    </label>
</span>

answered May 8, 2017 at 16:01

Daniel Cooke

1,66415 silver badges27 bronze badges

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

2 Comments

azulBonnet Over a year ago

Single quotes inside of the double quotes! Should have realized!

Nikhil Nanjappa Over a year ago

@Daniel Cooke - What if I want to get the value of checked radio button on template driven form submit ?

Jayakrishnan · Accepted Answer · 2017-05-08 11:47:45Z

0

Instead of @Input(), declare just a variable like below:

export class CarComponent implements OnInit{
     public currentTab: string = 'All';

     public onBtnClick(carType: string){
         this.currentTab = carType;
     }

     public ngOnInit() {
         this.currentTab = 'All';
     }
 }

@Input is responsible for one way binding in angular2.

Hope it helps!!

answered May 8, 2017 at 11:47

Jayakrishnan

4,3043 gold badges25 silver badges41 bronze badges

1 Comment

Cody Over a year ago

@Input is also two-way -- it depends on how the parent element is using it.

Collectives™ on Stack Overflow

Radio button not working properly in Angular 2

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related