How to implement an OnClick action on a MatTable row? - html

Question

I want to implement an OnClick on a row with reference. If i click on a row with user 1 i want to go so see details of user 1
For example, if I click on the row of user1, I want to access the information stored in the row for this user1.
This is the html file :
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="country">
<th mat-header-cell *matHeaderCellDef> Country </th>
<td mat-cell *matCellDef="let element"> {{element.country}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onClick(row)" >{{row.onClickAction}}</tr>
</table>
And this is the ts file :
export class AppComponent {
onClickAction = '';
onClick(){
this.onClickAction = 'Action';
}
}

Answer 1

Try like this , now you will have access to row data and use router service to navigate to another component.
template
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickHandler(row)">
</tr>
component
export class AppComponent {
constructor(private _router: Router) {}
clickHandler(row) {
this._router.navigateByUrl(`user/${row.id}`);
console.log(row)
}
}
detail component
export class DetailComponent implements OnInit {
public selectedUserId : string;
constructor(private _activatedRoute: ActivatedRoute) {}
ngOnInit() {
this._activatedRoute.params.subscribe(params => {
this.selectedUserId = params.id;
})
}
}
demo 🚀🚀
Updated🧙‍♂️
in case you want to send a complex object between the routes you can a shared service (singleton services) , or in case you using angular version 7.3 and above navigate accept another parameter with type NavigationExtras has a property called state accept an object later , after we navigate to the target component we can get the value of state from history object window.history.state
master
clickHandler(row) {
this._router.navigate([`details`,row.position] , {state:{...row} });
}
details
this.user = window.history.state;
you can use window.history.state or the router service to get the state value
demo ☕☕

Answer 2

If you pass data in in the html (click)="onClick(row)" you can use that in your method:
onClick(rowData) {
console.log(rowData);
this.onClickAction = 'Action';
}