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

42

votes

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>

angulartypescriptangular-material

85

votes

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

24

votes

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

11

votes

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.

3

votes

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.

1

votes

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

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

5 Answers