Cannot trigger mat-checkbox change event using template reference variable

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