Angular material design dynamic table

Question

I am trying create in Angular 9 dynamic table.

I have html:

<div *ngFor="let column of columns">
  <ng-container matColumnDef="{{column.columnSearchName}}">
    <mat-header-cell *matHeaderCellDef>
      <span mat-sort-header> <div [innerHTML]="column.columnName"></div></span>
      <span><input matInput class="filter-input" placeholder=""/></span>
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{insertValueInTable(element, column)}} </mat-cell>
  </ng-container>
</div>

<mat-header-row *matHeaderRowDef="(displayedColumns$)"></mat-header-row>
<mat-row *matRowDef="let row; columns: (displayedColumns$);"></mat-row>

and ts:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { GardenListService } from '../service/garden-list.service';
import { GardenDataSource } from '../dataSource/GardenDataSource';
import { MatSort } from '@angular/material/sort';
import { Column } from './class/column';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, AfterViewInit {

  data = new GardenDataSource(this.gardenService);
  displayedColumns$: string[] = [];

  @ViewChild(MatSort) sort: MatSort;

  columns: Column[] = [];

  constructor(private gardenService: GardenListService) {
  }

  ngOnInit(): void {
    this.columns = [
      {
        columnName: 'Číslo',
        columnSearchName: 'number',
      }, {
        columnName: 'Příjmení',
        columnSearchName: 'person.lastName',
      }, {
        columnName: 'Jméno',
        columnSearchName: 'person.firstName',
      }, {
        columnName: 'Město',
        columnSearchName: 'person.address.city',
      }, {
        columnName: 'Ulice',
        columnSearchName: 'person.address.street',
      }, {
        columnName: 'Číslo popisné',
        columnSearchName: 'person.address.streetNumber',
      }, {
        columnName: 'Číslo parcely',
        columnSearchName: 'plotNumber',
      }, {
        columnName: 'Plocha m²',
        columnSearchName: 'area',
      }, {
        columnName: 'Nájemné',
        columnSearchName: 'rent',
        currencyType: true,
      }
    ];

    this.columns.forEach(col => this.displayedColumns$.push(col && col.columnSearchName));

  }

  ngAfterViewInit(): void {

    this.sort.sortChange.subscribe(() => {
      this.gardenService.getAll(this.sort.active, this.sort.direction).subscribe((response) => {
        this.data = response;
      });
    });
  }

  insertValueInTable(element: any, column: Column): string {
      return element[column.columnSearchName];
  }
}

Data I get from backend. Data are load and when I want show it in table I see filled only a few columns.

Columns which contains columnSearchName with dot are empty. Columns withou dot are ok.

When I create in html file for every matColumnDef with inserted columnSearchName with dot all was ok. But dynamicky it not working.

How I can show data which have in columnSearchName dot.

Thank you

Answer 1

You can also try creating dynamic table this way, it works fine in your case for the value "person.firstName" or any value with dot.

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.header">
       <th mat-header-cell *matHeaderCellDef>{{ column.header }}
       </th>

       <td mat-cell *matCellDef="let element">{{ element[column.value] }}
       </td>
   <ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

In the above code dataSource is my data array in table and columns is header values of my table

Answer 2

I have to split words by dot and reduce. Solutions on my problem is https://stackoverflow.com/a/49295994/3468921