CODEWITHSUNDEEP
angulartypescriptangular-material
Vyas Reddy
Vyas Reddy

Reputation: 1262

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

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>

Upvotes: 67

Views: 136132

Answers (6)

Abid
Abid

Reputation: 361

<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.

Upvotes: 2

MJ X
MJ X

Reputation: 9044

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

Upvotes: 33

Mushtaq Jameel
Mushtaq Jameel

Reputation: 7083

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

Upvotes: 2

Jonathan Meguira
Jonathan Meguira

Reputation: 1960

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

Upvotes: 120

user4676340
user4676340

Reputation:

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.

Upvotes: 12

Shadowlauch
Shadowlauch

Reputation: 621

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.

Upvotes: 3

Related Questions