I am developing an application where I will receive some data in different instances, and with different amounts of columns, which is why I use *ngFor in my html component.
Being this the code:
<table mat-table [dataSource]="dataSource" matSort matSortChange)="announceSortChange($event)" >
<ng-container *ngFor="let column of columns" matColumnDef="{{ column.name }}" >
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ column.titulo }}
</th>
<td mat-cell *matCellDef="let element">
{{ element[column.name] }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
Where, through an array called columns, I pass through the typeScript the name of all the columns that should be displayed on the screen, and then fill their respective rows according to the key that I assigned name and it is printed in element[column.name] The code :
getData() {
this.GetResults.get(this.text).subscribe((res: any) => {
this.dataSource = new MatTableDataSource(res);}
The problem is that I need to assign a column of actions to a specific table, and since I fill it dynamically, I can't figure out how to do it.
I already tried adding a new td with the respective column but I think that because of the *ngFor it is not displayed correctly on screens
The actions column should be connected to each row, since the delete button should be able to receive somewhere the information of the row on which it is.
Help