CODEWITHSUNDEEP
angularradio-button
valar
valar

Reputation: 11

Angular 6 setting first radio button checked does not work

I am trying to set the first radio button in a group to checked.

I have 6 tabs and have set of scales collection which needs to be displayed as a radio group buttons, and the first button should be checked by default. I am using the following code snippet in my detail component. Only the first radio button of the last tab is getting checked and the ones in the initial tabs are not getting checked. Please note the last tab is the last detail component to be loaded.

<div>
<div  *ngFor="let callauditscale of callauditscales; let i=index" 
class="form-check form-check-inline ">
<input  class="form-check-input" [attr.checked]="i === 0 ? 'checked' : null" 
      type="radio"  name="ExpectationOptions" 
        [id]="getOPtionbuttonId(callauditscale.CallAuditScaleCode)" 
       [value]="callauditscale.CallAuditScaleCode" >
 <label class="form-check-label" 
   [for]="getOPtionbuttonId(callauditscale.CallAuditScaleCode)">
        {{callauditscale.CallAuditScaleCode}}
 </label>
</div>    
</div>

How can we get the first radio button be checked in each tab. The HTML that is rendered does have each of the first radio button checked attribute in place. I did have gone through the radio button related issues previously posted in this forum and have refined my code but it is still not working

Upvotes: 1

Views: 3573

Answers (1)

Juan Jos&#233;
Juan Jos&#233;

Reputation: 11

Use this way

[checked]="i === 0 ? true : false"

Upvotes: 1

Related Questions