CODEWITHSUNDEEP
angularangular-material
onedevteam.com
onedevteam.com

Reputation: 4178

Disabling click event on angular material row for specific values

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?

Upvotes: 0

Views: 5643

Answers (3)

Igor Kurkov
Igor Kurkov

Reputation: 5040

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();
}

Upvotes: 2

Marshal
Marshal

Reputation: 11081

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

Upvotes: 0

yaKay
yaKay

Reputation: 115

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.

Upvotes: 1

Related Questions