Angular Material 2 routerlink inside datatable

Question

I have a data table and I'm trying to assign an <a> around a participants name <td> that would take the user when clicked to a new component.

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant"> <a routerlink="/participants/userId">{{Participant.name}}</a> </td>
</ng-container>

It's not showing an error or anything, however, it's not making the <td> clickable, it's completely ignoring the routerLink, if I assign an href to the <a> it works.

Answer 1

One way of handling this will be based on (click) event.

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant"> 
  <span style="cusor:pointer;" (click)="navigate(Participant)">
        {{Participant.name}}</span>  </td>
</ng-container>

In your typescript code:

private navigate(product){
  this.router.navigate(['/participants', product]); //we can send product object as route param
}

Thanks.

Answer 2

You can also use it this way, and userId must be defined as an angular variable.

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let Participant" routerLink="/participants/{{userId}}"> {{Participant.name}}
   </td>
</ng-container>

Thanks