Call actions on a generic component from the child component

Issue

I have an Angular project with two components, a generic component where the table is defined and a component from which that table is invoked by passing the required data.

The problem is that the table generates a button to delete the record, the delete function has the component itself, not the generic component.

Is it possible to call only the component table.component and then call the function?

This is 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>

This is the table.component.ts:

@Input('dataSource') public dataSource: MatTableDataSource<any>;
@Input('displayedColumns') public displayedColumns: string[];

Child component, test1.component.html:

<app-table-edit
  [dataSource]="dataSource"
  [displayedColumns]="displayedColumns">  
</app-table-edit>

test1.component.ts:

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']

This is the generic service from which the endPoints are invoked, 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}`);
  }

This is the child component's own service, test1.service.ts:

constructor(
    private http: HttpClient
  ) {
    super(http, Company, 'http://localhost:8080/company');
  }

My problem: what is the best way to call the delete() service from the table button?

Solution

The table.component.ts can have a Output

@Output() onDelete=new EventEmitter<any>()

We use in the .html

    <button at-icon-button matTooltip="Delete" (click)="onDelete.emit(row)">
        <mat-icon>delete_forever</mat-icon>
    </button>

So, our test1.component.html becomes

<app-table-edit
  [dataSource]="dataSource"
  [displayedColumns]="displayedColumns"> 
  (onDelete)="delete($event)" 
</app-table-edit>

And is in test1.component.ts when we delete the element

delete(item:any)
{
  this.delete<void>(`${this.apiUrl}/${item.id}`).subscribe(_=>{
     //when delete we remove the element from the dataSource

     this.company.filter(x=>x.id!=item.id);
     this.dataSource = new MatTableDataSource(company);

     this.company=this.company.filter(x=>x.id!=item.id);
     this.dataSource = new MatTableDataSource(this.company);
  });
}

NOTE:Update code after give as valid

Answered By - Eliseo