Binding dynamic data with angular material produce no result

Question

Here is the ts file:

import { Component, OnInit, VERSION } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  dataSource: MatTableDataSource<Element>;

  BasicData: any = [
    {
      isActionButtonRequired: true,
      isSearchRequired: true,
      isPaginationRequired: true,
      basicHfColumnData: [
        {
          select: 'checkbox',
          position: 1,
          label: 'Hydrogen',
          weight: 1.0079,
          symbol: 'H',
        },
        {
          select: 'checkbox',
          position: 2,
          name: 'Helium',
          weight: 4.0026,
          symbol: 'He',
        },
        {
          select: 'checkbox',
          position: 3,
          name: 'Lithium',
          weight: 6.941,
          symbol: 'Li',
        },
        {
          select: 'checkbox',
          position: 4,
          name: 'Beryllium',
          weight: 9.0122,
          symbol: 'Be',
        },
        {
          select: 'checkbox',
          position: 5,
          name: 'Boron',
          weight: 10.811,
          symbol: 'B',
        },
        {
          select: 'checkbox',
          position: 6,
          name: 'Carbon',
          weight: 12.0107,
          symbol: 'C',
        },
        {
          select: 'checkbox',
          position: 7,
          name: 'Nitrogen',
          weight: 14.0067,
          symbol: 'N',
        },
        {
          select: 'checkbox',
          position: 8,
          name: 'Oxygen',
          weight: 15.9994,
          symbol: 'O',
        },
        {
          select: 'checkbox',
          position: 9,
          name: 'Fluorine',
          weight: 18.9984,
          symbol: 'F',
        },
        {
          select: 'checkbox',
          position: 10,
          name: 'Neon',
          weight: 20.1797,
          symbol: 'Ne',
        },
      ],
      columnTitleData: [
        { title: 'selectAllCheckbox', sort: false, type: null, source: null },
        { title: 'position', sort: true, type: 'number', source: 'position' },
        { title: 'name', sort: true, type: 'string', source: 'name' },
        { title: 'weight', sort: true, type: 'string', source: 'symbol' },
      ],
      pageSizeOptions: [5, 10, 15],
    },
  ];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.BasicData.basicHfColumnData);
    this.BasicData = { ...this.BasicData, basicHfColumnData: this.dataSource };
  }
}

tempalte:

<div>
  <table
    mat-table
    [dataSource]="BasicData.basicHfColumnData"
    class="mat-elevation-z8"
  >
    <ng-container
      matColumnDef="col"
      *ngFor="let col of BasicData.columnTitleData"
    >
      <th mat-header-cell *matHeaderCellDef>{{ col.title }}</th>
      <td mat-cell *matCellDef="let element">{{ element[col] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="BasicData.columnTitleData"></tr>
    <tr mat-row *matRowDef="let row; columns: BasicData.columnTitleData"></tr>
  </table>
</div>

But I get no result in browser.

Any one help me to understand the issue what I do here?

Live Demo

Answer 1

The first error you are using BasicData.columnTitleData also BasicData must be an object not an array.

The second error columnTitleData must be an array like columnTitleData: ["position", "name", "weight"]; and then pass the changes in your Html:

<div>
  <table
    mat-table
    [dataSource]="BasicData.basicHfColumnData"
    class="mat-elevation-z8"
  >
    <ng-container *ngFor="let col of BasicData.columnTitleData" matColumnDef="{{ col }}">
      <th mat-header-cell *matHeaderCellDef>{{ col }}</th>
      <td mat-cell *matCellDef="let element">{{ element[col] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="BasicData.columnTitleData"></tr>
    <tr mat-row *matRowDef="let row; columns: BasicData.columnTitleData"></tr>
  </table>
</div>

import { Component, OnInit, VERSION } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  dataSource: MatTableDataSource<Element>;

  BasicData: any = {
    isActionButtonRequired: true,
    isSearchRequired: true,
    isPaginationRequired: true,
    basicHfColumnData: [
      {
        select: 'checkbox',
        position: 1,
        label: 'Hydrogen',
        weight: 1.0079,
        symbol: 'H',
      },
      {
        select: 'checkbox',
        position: 2,
        name: 'Helium',
        weight: 4.0026,
        symbol: 'He',
      },
      {
        select: 'checkbox',
        position: 3,
        name: 'Lithium',
        weight: 6.941,
        symbol: 'Li',
      },
      {
        select: 'checkbox',
        position: 4,
        name: 'Beryllium',
        weight: 9.0122,
        symbol: 'Be',
      },
      {
        select: 'checkbox',
        position: 5,
        name: 'Boron',
        weight: 10.811,
        symbol: 'B',
      },
      {
        select: 'checkbox',
        position: 6,
        name: 'Carbon',
        weight: 12.0107,
        symbol: 'C',
      },
      {
        select: 'checkbox',
        position: 7,
        name: 'Nitrogen',
        weight: 14.0067,
        symbol: 'N',
      },
      {
        select: 'checkbox',
        position: 8,
        name: 'Oxygen',
        weight: 15.9994,
        symbol: 'O',
      },
      {
        select: 'checkbox',
        position: 9,
        name: 'Fluorine',
        weight: 18.9984,
        symbol: 'F',
      },
      {
        select: 'checkbox',
        position: 10,
        name: 'Neon',
        weight: 20.1797,
        symbol: 'Ne',
      },
    ],
    columnTitleData: ["position", "name", "weight"],
/*     columnTitleData: [
      { title: 'selectAllCheckbox', sort: false, type: null, source: null },
      { title: 'position', sort: true, type: 'number', source: 'position' },
      { title: 'name', sort: true, type: 'string', source: 'name' },
      { title: 'weight', sort: true, type: 'string', source: 'symbol' },
    ], */
    pageSizeOptions: [5, 10, 15],
  };
  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.BasicData.basicHfColumnData);
    this.BasicData = { ...this.BasicData, basicHfColumnData: this.dataSource };
  }
}