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:

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.