I am currently working on an Angular project with two components, one being a generic component where the table is defined and the other being a component that invokes this table by passing the required data.
However, I encountered an issue where the table generates a delete button for each record, but the delete function is part of the specific component, not the generic one.
My question is: Is there a way to only call the table.component and then trigger the delete function?
Below is the code for the generic component, table.component.html:
<mat-table [dataSource]="dataSource" matSort class="m-3 mat-elevation-z4">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<ng-container *ngIf="column != 'actions'">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ column | titlecase }} </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element[column] }}</mat-cell>
</ng-container>
<ng-container *ngIf="column == 'actions'">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let row;let i = index" class="container-button">
<button at-icon-button matTooltip="Delete" (click)="testDelete(dataSource.data[i])">
<mat-icon>delete_forever</mat-icon>
</button>
</mat-cell>
</ng-container>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
And here is the code for the table.component.ts file:
@Input('dataSource') public dataSource: MatTableDataSource<any>;
@Input('displayedColumns') public displayedColumns: string[];
As for the child component, test1.component.html:
<app-table-edit
[dataSource]="dataSource"
[displayedColumns]="displayedColumns">
</app-table-edit>
The test1.component.ts file contains the following code:
public dataSource: MatTableDataSource<Company>;
const company = [
{
"name":"test2Dyn",
"phoneNumber":null,
"province":null
},
{
"name":"test3Prov",
"phoneNumber":null,
"province":"Álava"
}
]
this.dataSource = new MatTableDataSource(company);
public displayedColumns: string[] = ['name','phoneNumber','province','actions']
In addition, we have the generic service responsible for invoking endpoints, api.service.ts:
constructor(
private httpClient: HttpClient,
private tConstructor: { new (m: Partial<T>, ...args: unknown[]): T },
protected apiUrl: string
) {}
public delete(id: number): Observable<void> {
return this.httpClient.delete<void>(`${this.apiUrl}/${id}`);
}
Lastly, we have the service specific to the child component, test1.service.ts:
constructor(
private http: HttpClient
) {
super(http, Company, 'http://localhost:8080/company');
}
So, my main issue lies in finding the best approach to call the delete() service when the delete button in the table is clicked. Any suggestions would be greatly appreciated!