CODEWITHSUNDEEP
angular
user54226
user54226

Reputation: 107

Angular - show checked value for Radio Button

I've a popup and in that there is a list of items populating through *ngFor loop. Everything working fine. Now what I want is, the first item remains selected when list first time show. Here is the code:

<div class="modal-body">
        <div class="checkBox-holder" *ngFor="let mr of myReasons; let i = index">
        <div class="radio-btn reason-options">
            <input type="radio" id="reason-{{i}}" name="radio-group" [value]="mr"
                    [checked]="selectedReason === reason-{{0}}" (click)="selectedReason = mr" [(ngModel)]="mr.value">
            <label for="reason-{{i}}">{{mr}}</label>
        </div>
        </div>
    </div>

But it's not working, and the radio button is showing as NOT checked.

Upvotes: 0

Views: 782

Answers (2)

Kaustubh Badrike
Kaustubh Badrike

Reputation: 609

Try

In template html

<input type="radio" id="reason-{{i}}" name="radio-group" [checked]="selectedReason === mr" (click)="selectedReason = mr" [(ngModel)]="mr.value">

In component.ts:

constructor (){
selectedReason = myReasons[0];
}

Upvotes: 1

Captain Winters
Captain Winters

Reputation: 68

You need to remove interpolation around value 0. Interpolation applies only to variables and not to constants.

selectedReason === reason-{{0}}

change this to 

selectedReason === reason-0

and also make sure that you have selectedReason initialized as reason-0.

Upvotes: 0

Related Questions