display a table within a table on a button click in angular 7

I am quite new to angular and web development and i am working with tables getting data from django PostgreSQL db to the front-end in form of tables. So, i need to have an details button in each row, clicking on which a new table is shown after that row. I am following the https://material.angular.io/components/table/examples of the expandable rows but i am not able to get desired results. i need to do something like this http://jsfiddle.net/Pixic/6Texj/ but in angualar7.

I've created the buttons (expand_more mat icon)in the rows and a function(on-click event)which is getting the response from django view, what is left is to display the filtered data in details table.

Is it possible to get the response in the description field as shown in the example below of angular material table, as the description is forming the expanded part of the table. Or i should follow a different approach altogether. I am very new to web development kindly ignore my mistakes.

const ELEMENT_DATA: PeriodicElement[] = [ { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', description: Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table. }