I am working with an Angular Material Data Table that has four columns. In every row, the last cell contains a button with an on-click function attached to it. I need to pass the value from the first cell ("Name") as a parameter in the corresponding button's function when clicked. Is there a way to achieve this?
Currently, the restart() function does not have any parameters, but I would like to add one so that I can pass it to my API.
Here is the code for table.component.ts:
import { Component, OnInit } from '@angular/core';
import { PowershellService } from 'src/app/services/powershell.service';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import { powershell } from 'src/app/models/powershell.model';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-apps-table',
templateUrl: './apps-table.component.html',
styleUrls: ['./apps-table.component.scss']
})
export class AppsTableComponent implements OnInit {
dataSource = new PowerShellDataSource(this.powershellService);
displayedColumns = ['Name', 'Description', 'Status', 'options'];
constructor(private powershellService: PowershellService,
private snackBar: MatSnackBar) { }
ngOnInit() {
}
restart() {
this.powershellService.getRestart()
.subscribe((data) => {
this.snackBar.open(data, 'Close', {
duration: 4000,
panelClass: ['snackbar']
});
},
(error) => {
console.log(error);
this.snackBar.open(error, 'Close', {
duration: 4000,
panelClass: ['snackbar']
});
});
}
}
export class PowerShellDataSource extends DataSource<any> {
constructor(private powershellService: PowershellService) {
super();
}
connect(): Observable<powershell[]> {
return this.powershellService.getPowershellApps();
}
disconnect() { };
}
The HTML code for table.component.html:
<div>
<mat-table [dataSource]="dataSource" class="mat-elevation-z3">
<ng-container matColumnDef="Name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let powershell">{{powershell.Name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Description">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let powershell">{{powershell.Description}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<ng-container *matCellDef="let powershell">
<mat-cell [ngSwitch]="powershell.Status">
<ng-container *ngSwitchCase="'Running'">
<mat-chip-list>
<mat-chip class="running" selected>Running</mat-chip>
</mat-chip-list>
</ng-container>
<ng-container *ngSwitchCase="'Stopped'">
<mat-chip-list>
<mat-chip class="stopped" selected>Stopped</mat-chip>
</mat-chip-list>
</ng-container>
<ng-container *ngSwitchDefault>
<mat-chip-list>
<mat-chip>{{powershell.Status}}</mat-chip>
</mat-chip-list>
</ng-container>
</mat-cell>
</ng-container>
</ng-container>
<ng-container matColumnDef="options">
<mat-header-cell *matHeaderCellDef>Options</mat-header-cell>
<mat-cell *matCellDef="let powershell">
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>desktop_mac</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></mat-row>
</mat-table>
</div>
<mat-menu #appMenu="matMenu">
<button mat-menu-item (click)="restart()">Restart</button>
</mat-menu>