Q:

How can i display object into data table using material?

This is my object 
[{
  "Element": 
  [
    {
      "name": "Hydrogen",
      "position":1,
      "symbols": [{"symbol": "H","Weight": "1.5"}]

    },
    {
      "position":2,
      "name": "Helium",
      "symbols": [{"symbol": "He",  "Weight": "3.2"}]
    },
    {
      "position":3,
      "name": "Lithium",
      "symbols": [{"symbol": "Li","Weight": "9.2" }]
    }
 ]
} ]

i want to display the above object into datatable i tried here but its not showing data
demo
its showing empty table

A:

Your data is wrong you are using array inside array and accessing it as a plain object
<ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.symbol[0].symbol}} </mat-cell>
</ng-container>

Modified data :
const ELEMENT_DATA: Element[] =
  [
    {
      "name": "Hydrogen",
      "position": 1,
      "symbol": [
        {
          "symbol": "H",
          "Weight": "1.5"
        }]

    },
    {
      "position": 2,
      "name": "Helium",
      "symbols": [
        {
          "symbol": "He",
          "Weight": "3.2"
        }]
    },
    {
      "position": 3,
      "name": "Lithium",
      "symbols": [
        {
          "symbol": "Li",
          "Weight": "9.2"
        }]
    }];

Updated StackBlitz

