How to show mat-table in Expanded Mat-row rather than in Main table

Issue

I have a mat-table with expanded rows. If I click on a row it expands and shows hardcoded text. For now, I am able to display a mat-table with expanded rows. From API I am getting the following details:-

1. Job Id
2. Execution Id
3. Before Time Period
4. After Time Period
5. Status

I just want to display Before and After Time Period on Mat-row and if I click on row it should expand and I should be able to view rest of the details. How can I achieve this? For now I am able to display whole data on main row and on clicking on the row it expands and I am able to show a hardcoded string 'This is expanded row'. I tried to make my mat-expanded row table by referencing the code in this stackblitz

Solution

If you are looking for a table in table. Which is called a detail table here is a good guide on how to do it

https://www.dzurico.com/angular-master-detail-table/

Answered By - chronolegend