jeudi 13 août 2020

Dynamically selecting the checkboxes in angular table

Hi I am working on an Angular project in which I am dynamically adding rows to a table.

My code in html

<table class="table table-sm table-bordered"
    style="width:100%; margin-bottom: 0em">
    <thead>
            <tr class="bg-header">
                    <th>
                            Select
                    </th>
                    <the>
                            Level
                    </th>
                    <th>
                            Config
                    </th>
                    <th>
                            Read
                    </th>
                    <th>
                            Value
                    </th>
            </tr>
    </thead>
    <tbody>
            <tr *ngFor = "let applicableLevel of applicableLevelsConfigList">
                    <td>
                            <mat-checkbox>
                            </mat-checkbox>
                    </td>
                    <td>
                            
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
            </tr>        
    </tbody>
</table>

I have a checkbox at the beginning of row, followed by name of row and then 3 checkboxes for rest of the columns. I would like to the initially disable these checkboxes which come after the name of the row. If the checkbox under select column(first column) is checked, then I would like to enable the other three checkboxes for that particular row, while these 3 checkboxes for other columns still has to be disabled. Since the number of rows is dynamic, I struggling how to achieve this. Can someone help me with this?




Aucun commentaire:

Enregistrer un commentaire