title: angular material table with tree
body: <p>You can see my code here:</p>
  
  
  
  <p><a href="https://stackblitz.com/edit/angular-vcjnbf?file=src%2Fapp%2Fapp.component.html" rel="noreferrer">https://stackblitz.com/edit/angular-vcjnbf?file=src%2Fapp%2Fapp.component.html</a></p>
  
  <p>I need to make a tree from the child elements in the table, now I did this:</p>
  
  <p><a href="https://i.stack.imgur.com/5EXpJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5EXpJ.jpg" alt="enter image description here"></a></p>
  
  <p>but I need it like this:</p>
  
  <p><a href="https://i.stack.imgur.com/f0pZc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/f0pZc.jpg" alt="enter image description here"></a></p>
  
  <p>that is, the element has child elements, I was able to output only one, how to do this in a loop? 
  As you can see in the loop I need to bring out the level.</p>
  
  <p>I found such a solution, but can there be something better?</p>
  
  <h2><a href="https://stackblitz.com/edit/material2-rc0-oufnyc?file=app/app.component.html" rel="noreferrer">https://stackblitz.com/edit/material2-rc0-oufnyc?file=app/app.component.html</a></h2>
  
  <p>component.html</p>
  
  <pre class="lang-angular prettyprint-override"><code>    &lt;table mat-table
         [dataSource]="dataSource"
         multiTemplateDataRows
         class="mat-elevation-z8"&gt;
  
    &lt;ng-container matColumnDef="{{column}}"
                  *ngFor="let column of columnsToDisplay"&gt;
      &lt;th mat-header-cell
          *matHeaderCellDef&gt; {{column}}
      &lt;/th&gt;
      &lt;td mat-cell
          *matCellDef="let element"&gt;
        {{element[column]}}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="{{column}}"
                  *ngFor="let column of ['expandedDetail', 'expandedDetail1']"&gt;
      &lt;td mat-cell
          *matCellDef="let element"
          [attr.colspan]="1"&gt; 111
        ++{{element | json}}++
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-row
        *matRowDef="let element; columns: columnsToDisplay;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = element"&gt;
  
    &lt;/tr&gt;
  
    &lt;tr mat-row
        *matRowDef="let row; columns: ['expandedDetail', 'expandedDetail1']"
        class="example-detail-row"&gt;
  
    &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre class="lang-angular prettyprint-override"><code>   import {DirectoryService} from '../shared/services/directory.service';
  import {Component, OnInit} from '@angular/core';
  import {animate, state, style, transition, trigger} from '@angular/animations';
  
  @Component({
    selector: 'app-units',
    templateUrl: './units.component.html',
    styleUrls: ['./units.component.scss'],
    animations: [
      trigger('detailExpand', [
        state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
        state('expanded', style({height: '*'})),
        transition('expanded &lt;=&gt; collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
      ]),
    ],
  })
  export class UnitsComponent implements OnInit {
  
    dictionary = {};
  
    dataSource = ELEMENT_DATA;
    columnsToDisplay = ['name', 'weight'];
  
    constructor(private directoryService: DirectoryService) {
  
    }
  
    ngOnInit() {
      this.directoryService.getDictionary()
        .subscribe(data =&gt; {
          console.log(data);
          this.dictionary = data;
        });
  
    }
  
  }
  
  const ELEMENT_DATA = [
    {
      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.`,
      level: [
        {
          test1: 'tata',
          test2: 'vava'
        }
      ]
    }, {
      position: 2,
      name: 'Helium',
      weight: 4.0026,
      symbol: 'He',
      description: `Helium is a chemical element with symbol He and atomic number 2. It is a
          colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
          group in the periodic table. Its boiling point is the lowest among all the elements.`,
      level: [
        {
          test1: 'tata',
          test2: 'vava'
        },
        {
          test1: 'tata',
          test2: 'vava'
        }
      ]
    }, {
      position: 3,
      name: 'Lithium',
      weight: 6.941,
      symbol: 'Li',
      description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
          silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
          lightest solid element.`,
      level: [
        {
          test1: 'tata',
          test2: 'vava'
        },
        {
          test1: 'tata',
          test2: 'vava'
        },
        {
          test1: 'tata',
          test2: 'vava'
        }
      ]
    }
  ];
  </code></pre>