Search code examples
angularclickmat-tabledisable

How to disable click event on angular mat table row?

In angular mat table ,I have the below code to expand a table row when clicked anywhere on it.

Now I want to disable certain rows click action from getting triggered based on property "element.disable".

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id</th>
          <td mat-cell *matCellDef="let element" class="example-element-row data_align"
           [class.example-expanded-row]="expandedElement === element"
           (click)=" expandedElement = expandedElement === element ? null : element">     {{element?.id}} </td>
        </ng-container>

I tried adding

[disabled]="element.disable"

but, this is not working.

How to disable click on certain rows?

Solution

  • Try doing something like this

    <td mat-cell (click)="element.disable ? $event.stopPropagation() : 'else do something'"></td>