Disabling click event on angular material row for specific values

Question

I have material table similar to this:

<md-table [dataSource]="dataSource">
    <ng-container mdColumnDef="a">
      <md-header-cell *mdHeaderCellDef> a </md-header-cell>
      <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.a}} </a></md-cell>
    </ng-container>

    <ng-container mdColumnDef="b">
      <md-header-cell *mdHeaderCellDef> b </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.b}} </md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="['a', 'b']"></md-header-row>
    <md-row *mdRowDef="let row; columns: ['a', 'b']" (click)="selectRow(row)"></md-row>
  </md-table>

I would like to disable click event in some cases, for example, when element.b cell have some value. i'm using latest versions of angular and material...

Is this possible, and how?

Igor Kurkov · Accepted Answer · 2021-02-01 13:37:39Z

2

If you need it for matMenu or matSelect inserted in mat table row (td) - which opened and invoke whole row click if you have whole row click set, need to control click on them by

*.html

<button
  [matMenuTriggerFor]="actionOptionsMenu"
  mat-icon-button
  (click)="handleActionsClick(actionOptionsMenu, $event)"
>
  <mat-icon>more_vert</mat-icon>
</button>

<mat-menu
  #actionOptionsMenu="matMenu"
 ...

and *.ts foo

handleActionsClick(mySelect, event) {
  event.stopPropagation();
  event.preventDefault();
  mySelect.open();
}

answered Feb 1, 2021 at 13:37

Igor Kurkov

5,1893 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yaKay · Accepted Answer · 2018-12-14 20:12:49Z

1

Yes, it's possible using angular Change Detection.

Please refer to: A Comprehensive Guide to Angular onPush Change Detection Strategy

In order to disable the clickable cell you can do this:

   <md-row *mdRowDef="let row; columns: ['a', 'b']" [disabled]='logic == true' (click)="selectRow(row)"></md-row>

I hope you find this useful.

answered Dec 14, 2018 at 20:12

yaKay

11713 bronze badges

Comments

Marshal · Accepted Answer · 2018-12-14 22:24:50Z

0

You can do the following to achieve this.

@HostListener('click', ['$event'])
  onClick(event) {
    if (event.target.innerHTML === " 9.0122 ") {
      event.stopPropagation(); //swallow event and prevent it from bubbling up
    } else {
      console.log('@HostListener: ', event.target.innerHTML)
    }

Notice in the Stackblitz click events are logged in the console on everything but the Weight column with a value of 9.0122

Stackblitz

https://stackblitz.com/edit/angular-mgnzv4?embed=1&file=app/table-basic-example.ts

answered Dec 14, 2018 at 22:24

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

Collectives™ on Stack Overflow

Disabling click event on angular material row for specific values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related