I'm using Ngfor inside Ngfor for creating multile checkbox from object array, only single checkbox is getting selected from all checkboxes

Question

I'm using ionic angular and creating checkboxes from dynamic data in rows and columns, only single checkbox is getting selected from all.

I want to select only one checkbox from each row and do a total of all the values of all NgModel's

My code snippet...

<ion-row *ngFor="let eachVariation of productDetails.productVariations; let i = index">
        <div *ngFor="let eachVariationOption of productDetails.productVariations[i].variationOptions">
        <ion-col
          size="1.5"
          style="margin-bottom: 0.5em">
           <input
              [(ngModel)]="eachVariationOption.selectedVariation"
              type="radio"
              [value]="eachVariationOption"
              (click)="selectVariation(eachVariation, 'yes')"
            />
          
        </ion-col>
      </div>
      </ion-row>

Answer 1

You have to give the same name the inputs that have to be together in a group.

So

<input type="radio" name='group_1'/>
<input type="radio" name='group_1'/>
<input type="radio" name='group_2'/>
<input type="radio" name='group_2'/>

will give you 4 radio buttons that are grouped into 2 groups of 2.

In your case you have to name them in the inner loop with something that is available in the outer loop for instance the index or a field that is in the eachVariation object.

<input type="radio" [name]=""eachVariation.name"

Assuming name exists in eachVariation.