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