title: Dynamically generate tabs and tables in Angular
body: <p>I am trying to dynamically build the tabs and the tables under each of those tabs. I referred to this project for <a href="https://stackoverflow.com/questions/51377884/iterate-through-datasource-in-mat-table-angular">dynamic tables</a> for the dynamic table.</p>
  <p>This is my repo - <a href="https://stackblitz.com/edit/angular-9-material-starter-r6di58?file=src%2Fapp%2Ftable%2Ftable.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9-material-starter-r6di58?file=src%2Fapp%2Ftable%2Ftable.component.ts</a></p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/mPV1k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPV1k.png" alt="enter image description here" /></a></p>