Angular mat table - get click event working

Question

I would like to select an item (row) of my mat table in my Angular app. Therefore I am using the Angular Material. I think I don't know the right place to add the (click)-event or do I have to do it in another way? Thanks for helping!

<div class="table-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="item_id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="item_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let item" (click)="onSelect(item)"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

The example is'nt working.

Rahul Singh · Accepted Answer · 2017-11-26 17:20:32Z

5

Just Try like this

<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" (click) = "click('aaa')" > {{element.position}} </mat-cell>
</ng-container>

Working Plunker link

Click on first columns of the table

answered Nov 26, 2017 at 17:20

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

4 Comments

dafna Over a year ago

Thanks! That was fast! The alert is working in my app, too. But not my other function. But then there must be another problem. I try to solve it in my own. Thanks!

dafna Over a year ago

But how can I change the mouse icon from arrow to the hand. Do you know?

Rahul Singh Over a year ago

@dafna change css cursor for the element to this { cursor: pointer; }

dafna Over a year ago

Working! Thanks! :)

Collectives™ on Stack Overflow

Angular mat table - get click event working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related