Dynamically generate tabs and tables in Angular

Question

I am trying to dynamically build the tabs and the tables under each of those tabs. I referred to this project for dynamic tables for the dynamic table.

This is my repo - https://stackblitz.com/edit/angular-9-material-starter-r6di58?file=src%2Fapp%2Ftable%2Ftable.component.ts

I am not really sure if the way I am passing the table data as an async stream is working. In my program, I have two tabs - Employee, Manager and each of the tabs has a table under it. Each table has its own sorter, pagination, and search. Search word is passed to the component.

Answer 1

The root of your problem is that you are not passing the correct inputs to your component.

In tab.component.html you can use the async pipe to get the column and row arrays from your observables that your app-table component expects. Then, refer to each section using the tab name. You could use an index or enum instead, but your structure would need to support it.

<ng-container *ngIf="{row: (rowData$ | async), col: (colData$ | async)} as data">
     <app-table [row]="data.row[tab.tabName]" [columns]="data.col[tab.tabName]" [search]='filters'>
     </app-table>
</ng-container>

Also, in table.component.html adding *ngIf="dataSource" to your mat-table tag will help clean up errors getting thrown before your dataSource is set.

I have some of your example working here: stackblitz