Hello, I require assistance with a task.
I am trying to display multiple mat-tables with different data sources in my component.ts file
Groups(){
this.apiSvc.Cards().subscribe((rsp: any) => {
this.groups = rsp;
this.groups.forEach((row: any) =>{
this.Employees(row.id);
});
});
}
Employees(id:any){
this.apiSvc.Groups(id).subscribe((rsp: any) => {
this.employees = rsp;
this.dataSource = new MatTableDataSource(this.employees);
this.dataSource.paginator = this.paginator;
console.log(this.dataSource);
});
}
As a result, I have multiple data sources like this -
https://i.stack.imgur.com/qkAdU.png
I am looking for a way to use ngFor loop on these data sources to display multiple tables with varying data.
This is the code from my component.html file
<div fxFlex.gt-lg="75" fxFlex.gt-md="73" fxFlex.gt-xs="100" fxFlex="100">
<mat-card class="mat-card-employee">
<mat-card-content>
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" class="table employee-list no-wrap">
<ng-container matColumnDef="#">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> User </th>
<td mat-cell *matCellDef="let element"> {{element.username}} </td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element" class="action-link">
<a (click)="openDialog('Update',element)" class="m-r-10 cursor-pointer"><i class="fa fa-pencil"></i></a>
<a (click)="openDialog('Delete',element)" class="m-r-10 cursor-pointer">
<i class="fa fa-trash text-danger"></i>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</mat-card-content>
</mat-card>
</div>
If anyone knows how to assign multiple data sources to the [dataSource] property of mat-table, any help would be greatly appreciated. Thank you