Angular Material 7: Link for whole row
Well, you can do the classic trick of an empty a tag over the whole row. Simply put the tag into just ONE of ng-containers and give it a custom css rule:
<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.name}}
<a fxFlexFill [routerLink]="'/maintenance/data/'+element.id" class="mat-row-link"></a>
</mat-cell>
</ng-container>
<ng-container matColumnDef="lastname">
<mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.lastname}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Then on CSS:
.mat-row{
position: relative;
}
.mat-row-link{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Just remember that an empty a tag will make the job, but doesn't comply all the SEO standars...
Add routerLink to mat-row
<mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="'transaction/' + row.id" class="row-hover"></mat-row>
OR
You could add click event and custom css class to mat-row:
<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="navigateTo(row)" class="row-hover"></mat-row>
then in .ts file:
import { Router } from '@angular/router';
...
...
constructor(private router: Router) {}
...
navigateTo(row: any) {
this.router.navigate(['/maintenance/data/'+row.id]);
}
And add css class
.row-link:hover {
background-color: rgba(0, 0, 0, .05);
cursor: pointer;
}