How to put distinct buttons in Angular mat-table? - arrays

Question

I'm using angular mat table to display an array of data like below with simple sorting. The final column is a column of buttons. I'd like to have distinct buttons in each row that route to a different component.
Array as a table
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let device"> {{device.name}} </td>
</ng-container>
<!-- SerialNo Column -->
<ng-container matColumnDef="serialNo">
<th mat-header-cell *matHeaderCellDef > SerialNo </th>
<td mat-cell *matCellDef="let device"> {{device.serialNo}} </td>
</ng-container>
<!-- Button Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef > Actions </th>
<td mat-cell *matCellDef="let row" >
<button mat-button routerLinkActive="list-item-active" routerLink="/device1" >View</button>
</td>
my component.ts is like this.
export interface Devices {
name: string;
position: number;
serialNo: number;
}
//An Array of device1
const DEVICES: Devices[] = [
{position: 1, name: 'Device 1', serialNo: 135421},
{position: 2, name: 'Device 2', serialNo: 125240},
{position: 3, name: 'Device 3', serialNo: 124350},
{position: 4, name: 'Device 4', serialNo: 124500},
{position: 5, name: 'Device 5', serialNo: 145620},
];
displayedColumns: string[] = ['position', 'name', 'serialNo', 'actions'];
dataSource = new MatTableDataSource(DEVICES);
#ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
How would I go about adding distinct buttons in each row that use routerLink to route to different components.

Answer 1

Do you want to redirect each link to a different angular component or do you want to redirect each link to the same angular component (for example, a device detail component), but with different url and device information (like redirecting to '/device/1', 'device/2' etc..)?
If the latter is the case, suppose you want to redirect each device to an angular route '/device-detail/:id', where id is the identification of the device. For simplicity, suppose id is the serialNo. So you just need to change the button declaration. Substitute routerLink="/device1" for [routerLink]="['/device-detail', device.serialNo]" (I also changed *matCellDef="let row" to *matCellDef="let device"):
<td mat-cell *matCellDef="let device" >
<button mat-button routerLinkActive="list-item-active" [routerLink]="['/device-detail', device.serialNo]" >View</button>
</td>