angular - Mat Table - Multiple checkboxes in a row - Selection issue

Question

I have a mat table with auto generated columns and each cell contains 3 checkboxes. Currently if I am select one check box, all the checkboxes in the same row getting selected. HTML

Column Name {{dataSourceColumnTable.dataElementName}} {{disCol}} Enable     Trending

                        <mat-checkbox [(ngModel)]="ruleDetailmaster.notificationFlg">Notification</mat-checkbox>
                        <mat-form-field class="example-full-width">
                            <mat-label>Pass Value</mat-label>
                            <input matInput placeholder="0" value="0" [(ngModel)]="ruleDetailmaster.passPerc">
                        </mat-form-field>
                    </td>
                </ng-container>                    
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>           <table mat-table #table [dataSource]="dataSourceColumnTable" class="mat-elevation-z8">  
                <ng-container matColumnDef="Column Name" sticky>
                    <td mat-header-cell fxFlex="200px" *matHeaderCellDef [ngClass]="'customWidthClass'" > Column Name </td>
                    <td mat-cell fxFlex="200px" *matCellDef="let dataSourceColumnTable" [ngClass]="'customWidthClass'"> {{dataSourceColumnTable.dataElementName}} </td>
                </ng-container>                   
                <ng-container *ngFor="let disCol of displayedColumnsHeader; let colIndex = index" matColumnDef="{{disCol}}">
                    <th mat-header-cell fxFlex="200px" *matHeaderCellDef [ngClass]="'customWidthClass'">{{disCol}}</th>
                    <td mat-cell *matCellDef="let ruleDetailmaster"[ngClass]="'customWidthClass'" fxFlex="200px"> 
                        <mat-checkbox [(ngModel)]="ruleDetailmaster.ruleSelectionFlg" [checked]="ruleDetailmaster.ruleSelectionFlg">Enable</mat-checkbox>
                        <mat-label>&nbsp;&nbsp;&nbsp;</mat-label>
                        <mat-checkbox [(ngModel)]="ruleDetailmaster.trendingFlg">Trending</mat-checkbox>

                        <mat-checkbox [(ngModel)]="ruleDetailmaster.notificationFlg">Notification</mat-checkbox>
                        <mat-form-field class="example-full-width">
                            <mat-label>Pass Value</mat-label>
                            <input matInput placeholder="0" value="0" [(ngModel)]="ruleDetailmaster.passPerc">
                        </mat-form-field>
                    </td>
                </ng-container>                    
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>           

Typescript: Model data:

public ELEMENT_DATA: Ruledetailmaster[] =[ {ruleDetailId: "774",ruleId: "4",ruleCd: "MATHEMATICAL_SUM",ruleType: "COLUMN",portfolioName: "Scorestore_uusc",searchLevel: "Table",runFrequency: "1",targetDbName: "exdmomaster",targetTblName: "twealth_complete",dataElementName: "age_cd",ruleSelectionFlg: true,ruleConstraint: "NUMERIC_CHECK",ruleConstraintDesc: "NUMERIC_CHECK",passPerc: "100",notificationFlg: false,notificationContact: "[email protected]",insertedDt: "2021-01-18 03:09:49.067499+00",insertedBy: "xxxx",updatedBy:"xxxx",updatedDt: "2021-01-18 03:09:49.067499+00",trendingFlg: true}, {ruleDetailId: "776",ruleId: "1",ruleCd: "UNIQUENESS",ruleType: "COLUMN",portfolioName: "Scorestore_uusc",searchLevel: "Table",runFrequency: "1",targetDbName: "exdmomaster",targetTblName: "twealth_complete",dataElementName: "blank1",ruleSelectionFlg: false,ruleConstraint: "NULL_CHECK",ruleConstraintDesc: "NULL_CHECK",passPerc: "80",notificationFlg:true,notificationContact: "[email protected]",insertedDt: "2021-01-18 03:09:49.067499+00",insertedBy: "xxxxx",updatedBy:"xxxxx",updatedDt: "2021-01-18 03:09:49.067499+00",trendingFlg: false}, {ruleDetailId: "776",ruleId: "1",ruleCd: "STARTSWITH",ruleType: "COLUMN",portfolioName: "Scorestore_uusc",searchLevel: "Table",runFrequency: "1",targetDbName: "exdmomaster",targetTblName: "twealth_complete",dataElementName: "blank2",ruleSelectionFlg: true,ruleConstraint: "NULL_CHECK",ruleConstraintDesc: "NULL_CHECK",passPerc: "70",notificationFlg: true,notificationContact: "[email protected]",insertedDt: "2021-01-18 03:09:49.067499+00",insertedBy: "xxxx",updatedBy:"sheejo",updatedDt: "2021-01-18 03:09:49.067499+00",trendingFlg: false}, {ruleDetailId: "776",ruleId: "1",ruleCd: "NULL_CHECK",ruleType: "COLUMN",portfolioName: "Scorestore_uusc",searchLevel: "Table",runFrequency: "1",targetDbName: "exdmomaster",targetTblName: "twealth_complete",dataElementName: "blank3",ruleSelectionFlg: false,ruleConstraint: "NULL_CHECK",ruleConstraintDesc: "NULL_CHECK",passPerc: "60",notificationFlg: false,notificationContact: "[email protected]",insertedDt: "2021-01-18 03:09:49.067499+00",insertedBy: "xxxxx",updatedBy:"xxxxx",updatedDt: "2021-01-18 03:09:49.067499+00",trendingFlg: true}, {ruleDetailId: "776",ruleId: "1",ruleCd: "NUMERIC_CHECK",ruleType: "COLUMN",portfolioName: "Scorestore_uusc",searchLevel: "Table",runFrequency: "1",targetDbName: "exdmomaster",targetTblName: "twealth_complete",dataElementName: "blank4",ruleSelectionFlg: true,ruleConstraint: "NULL_CHECK",ruleConstraintDesc: "NULL_CHECK",passPerc: "50",notificationFlg: true,notificationContact: "[email protected]",insertedDt: "2021-01-18 03:09:49.067499+00",insertedBy: "xxxxx",updatedBy:"xxxxx",updatedDt: "2021-01-18 03:09:49.067499+00",trendingFlg: true} ];

The issue is while selecting a checkbox, all the checkboxes are getting selected. Thanks in advance

question from:https://stackoverflow.com/questions/65838865/mat-table-multiple-checkboxes-in-a-row-selection-issue

Answer 1

Waitting for answers