How to add click event on mat-row in angular material table

Question

I added this but when inspecting element using Chrome DevTools, the click function doesn't show!

Here's my code:

  <mat-table [dataSource]="dataSource1" class="mat-table">
    <!-- Position Column -->
    <ng-container matColumnDef="Objname">
      <mat-header-cell *matHeaderCellDef> ObjName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.objname}} </mat-cell>
    </ng-container>
    <!-- Weight Column -->
    <ng-container matColumnDef="Successcount">
      <mat-header-cell *matHeaderCellDef> Successcount   </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.successcount}} </mat-cell>
    </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row (click)="getRecord(element.objname)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

score 112 · Answer 1 · answered Mar 07 '18 at 09:04

112

almost the same solution as above but a bit more useful if you are trying to get the object from the clicked row

<mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row>

when you console log the row you will get the entire object of the row

answered Mar 07 '18 at 09:04

Jonathan Meguira

1,860
2
12
15

Thanks is this documented somewhere?? I would like to know the class/type of object you get back etc etc. – Melroy van den Berg Mar 08 '18 at 12:34
how can I get the row data to another component variable? – hash Oct 16 '18 at 06:08
The class/type is the type of your item. There's no need to do something like `row.data`. In fact I find it more readable to put `let customer` instead of `let row` then your event becomes `(click)="selectCustomer(customer.id)` or something like that. – Simon_Weaver Jun 05 '19 at 00:11
does not work for me – Shaved Man Oct 14 '22 at 18:34

score 30 · Answer 2 · edited Jun 16 '20 at 06:52

30

If some body needs to use a router link you can do it like bellow:

<tr 
  mat-row 
  *matRowDef="let element; columns: displayedColumns" 
  [routerLink]="['/newsfeed/editnews/', element.NewsfeedID]">
</tr>

you should create a route to match the link, for example:

const routes: Routes = [
  {
    path:'editnews/:newsfeedid', component:NewsfeedformComponent
  }
]

If you want to get the id from url in your component, under ngOnInit use ActivatedRoute like bellow:

import { ActivatedRoute } from '@angular/router';

ngOnInit() {
this._activatedRoute.paramMap.subscribe(params => {
// in the route we created edit route we set newsfeedid as param so we get it here
  const NewsfeedID = +params.get('newsfeedid');
  if (NewsfeedID) {
    //this.getAgentbyid(agentid);
    console.log(NewsfeedID);
    }
 })
}

edited Jun 16 '20 at 06:52

ssuperczynski

3,190
3
44
61

answered Dec 04 '19 at 16:07

MJ X

8,506
12
74
99

1

What, if I have a mat-icon-button for additional actions in each row? How could I prevent that the router gets triggered, when clicking that icon (which should open a dropdown-menu instead? – jheider Aug 07 '20 at 11:20
3

add this in your icon: (click)="$event.stopPropagation()" – MJ X Aug 07 '20 at 20:34
1

ah, perfect. Thank you so much :) – jheider Aug 08 '20 at 06:25

score 12 · Answer 3 · answered Jan 09 '18 at 08:45

Watch your *matRowDef, you created a row variable, yet in your click event, you're giving an element one.

<mat-row (click)="getRecord(element.objname)" *matRowDef="let row; columns: displayedColumns;"></mat-row>

Otherwise, you won't see it be inspecting it : Angular creates event listeners in JS to handle events. You can either create it in HTML or in Javascript, they choose to do it in Javascript. Just test your function with a console log, it should work.

score 3 · Answer 4 · answered Jan 09 '18 at 08:40

3

In general a click event on the row works (https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html).

The element.objname is not defined in that scope. You have to rename let row; to let element.

answered Jan 09 '18 at 08:40

Shadowlauch

581
1
5
13

– Whisher Jun 26 '19 at 19:09

score 2 · Answer 5 · answered May 26 '20 at 06:23

I would prefer to add a formControl to the material table as such

<mat-table matSort
             [formControl]="formControl"
             ...
             >
       ....
</mat-table>

and then in my ngOnInit method use

readonly formControl = new FormControl();

ngOnInit(): void {
    this.formControl.valueChanges.subscribe((request: RequestViewModel) => {
      this.selectedInvestigationId(request.investigation.investigationInfoId, request.speciality);
    });
  }

The benefits are numerous:

It will work with keyboard navigation (formControl treats selection with SPACE/ENTER/click equally).
It can use form validation
You can use form flags, such as ng-dirty

score 1 · Answer 6 · answered Nov 19 '22 at 19:31

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClick(row)"></tr>

I'm using Angular 14 and Angular Material 14. I have just passed a function in the last tr tag which is "matRowDef" row. It's returning the row value perfectly when I click over a row.

How to add click event on mat-row in angular material table

6 Answers6

Linked