Issue
I have a table
with two columns
- mat-checkbox
in one and the other holds a String
. The idea is that when the string cell is clicked it will trigger mat-checkbox.change
event.
I have referenced a mat-checkbox
within an a for-loop using template reference variable. I am able access and set its checked
value, however, I am not able to access the (change)
event anymore (it worked previously).
I recently implemented changes that render availableRoles
to be null
and since then (and the respective *ngIf
implementation) I am unable to trigger change action from (click)="roleCheck.change"
event.
Issue referenced is in <tbody>
block
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th class="border-right-0">
<mat-checkbox (change)="groupRoleCheckToggle()" [checked]="groupRoleCheckState == 2"
[indeterminate]="groupRoleCheckState == 1">
</mat-checkbox>
</th>
<th class="text-center border-left-0 w-100">
Roles
</th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="availableRoles">
<tr *ngFor="let role of availableRoles">
<td class="border-right-0">
<mat-checkbox (click)="$event.stopPropagation()" (change)="selectRole(role)"
[checked]="role.selected" #roleCheck>
</mat-checkbox>
</td>
<td class="border-left-0" (click)="roleCheck.change">
<span class="ml-3">
{{role.name}}
</span>
</td>
</tr>
</ng-container>
<tr *ngIf="!availableRoles">
<td colspan="2" class="text-center">
<i>
Please select a group...
</i>
</td>
</tr>
</tbody>
</table>
Solution
A potential solution in this particular case is also to call selectRole(role)
method from click event on the String
column. Effectively the below code would achieve the required functionality provided that the selectRole
method controls the selected
state.
<td class="border-left-0" (click)="selectRole(role)">
<span class="ml-3">
{{role.name}}
</span>
</td>
Answered By - Kyan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.