angular material table with tree

Question

You can see my code here:

https://stackblitz.com/edit/angular-vcjnbf?file=src%2Fapp%2Fapp.component.html

I need to make a tree from the child elements in the table, now I did this:

but I need it like this:

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.

I found such a solution, but can there be something better?

https://stackblitz.com/edit/material2-rc0-oufnyc?file=app/app.component.html

component.html

    <table mat-table
       [dataSource]="dataSource"
       multiTemplateDataRows
       class="mat-elevation-z8">

  <ng-container matColumnDef="{{column}}"
                *ngFor="let column of columnsToDisplay">
    <th mat-header-cell
        *matHeaderCellDef> {{column}}
    </th>
    <td mat-cell
        *matCellDef="let element">
      {{element[column]}}
    </td>
  </ng-container>

  <ng-container matColumnDef="{{column}}"
                *ngFor="let column of ['expandedDetail', 'expandedDetail1']">
    <td mat-cell
        *matCellDef="let element"
        [attr.colspan]="1"> 111
      ++{{element | json}}++
    </td>
  </ng-container>

  <tr mat-row
      *matRowDef="let element; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = element">

  </tr>

  <tr mat-row
      *matRowDef="let row; columns: ['expandedDetail', 'expandedDetail1']"
      class="example-detail-row">

  </tr>

</table>

component.ts

   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 <=> 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 => {
        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'
      }
    ]
  }
];

Answer 1

I was doing somthing similar myself, eventually I used this package ng-material-treetable, so simple and elegant.