How to set radio button by default in angular 4.0?

Question

I am currently using angular 4.0. I have two radio buttons, how to set some radio button by default.

    <div class="row" style="margin-top: 5px;margin-left: 5px;">
         <input type="radio" value="timeShift" (click)="selectOption($event)" ngModel="mValue" > TIMESFTO & TIMESFT1
</div>
<div class="row" style="margin-top: 5px;margin-left: 5px;">
    <input type="radio" value="rsh" (click)="selectOption($event)" ngModel="mValue" checked="checked"> RSH1
</div>

Possible duplicate of [Angular 4 default radioButton Checked by Default](https://stackoverflow.com/questions/43780840/angular-4-default-radiobutton-checked-by-default) — mxr7350, Jan 17 '18 at 15:22

score 1 · Accepted Answer · answered Jan 17 '18 at 15:31

You can use value attribute to checked by default.

   <div class="row" style="margin-top: 5px;margin-left: 5px;">
     <input type="radio" [value]="true" 
      (click)="selectOption($event)" ngModel="mValue" > TIMESFTO & 
        TIMESFT1
   </div>
   <div class="row" style="margin-top: 5px;margin-left: 5px;">
    <input type="radio" [value]="true" (click)="selectOption($event)" 
       ngModel="mValue" checked="checked"> RSH1
   </div>

Or You need to set value of variable timeShift/rsh in component with boolean true.

score 0 · Answer 2 · answered Jan 17 '18 at 15:31

you can use [checked] to make radio button checked

<div class="row" style="margin-top: 5px;margin-left: 5px;">
    <input type="radio" [value]="'timeShift'"   > TIMESFTO & TIMESFT1
</div>
<div class="row" style="margin-top: 5px;margin-left: 5px;">
<input type="radio" [value]="'rsh'"   [checked]="true"> RSH1
</div>

How to set radio button by default in angular 4.0?

2 Answers2