How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!

Question

THIS IS MY TS FILE

  import { Component, OnInit } from '@angular/core';
    import { RecommendationService } from '../recommendation-service.service';
    import { CustomHttpService } from 'app/services/custom-http.service';


    @Component({
      selector: 'app-opportunity',
      templateUrl: './opportunity.component.html',
      styleUrls: ['./opportunity.component.scss'],
      providers: [RecommendationService]

    })
    export class OpportunityComponent implements OnInit {


      resData: any = [];
      keys: any;
      show: boolean;

      constructor(private recommendationService: RecommendationService) {
        this.recommendationService.viewData().subscribe(resViewData => {
          this.resData = resViewData;
          this.keys = Object.keys(resViewData[0])

        });
      }

      toggle() {
        this.show = !this.show
      }
      ngOnInit() {

      }

<--! THIS IS MY HTML-->

<table *ngIf='show'>

        <th *ngFor="let res of keys"> 
      <!-- passing data into function-->
      {{res}}
          <div *ngFor="let schedule_data of resData">
            {{schedule_data[res]}}
          </div>
        </th>

      </table>

   [![THIS IS MY RESULT][1]][1]

This is my JSON

[
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
]

**

i want to dispay this table data from normal html to angular material as im getting data from local json and displaying data please help!

so it possible to make normal html to angular mat table could please tell me how to make mat table. im mostly confused in how to make header in angular mat table and how to display rows!

Answer 1

As explained in the Material Spec. You can do the following:

EDIT for dynamic data

component.ts

resData: any = [];
keys: any;

component.html

<table *ngIf="resData.length > 0" mat-table class="mat-elevation-z8 table-content" [dataSource]="resData">
  <ng-container *ngFor="let currentCol of keys; let colIndex = index" matColumnDef="{{ currentCol }}">
    <th mat-header-cell *matHeaderCellDef>{{ currentCol }}</th>
    <td mat-cell *matCellDef="let element; let rowIndex = index">{{
      element[colIndex] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="keys"></tr>
  <tr mat-row *matRowDef="let row; columns: keys;"></tr>
</table>

Answer 2

You can do this without creating an Interface also, here is a working StackBlitz example

In app.module.ts:

import {MatTableModule} from '@angular/material/table';

Add this module in imports array:

imports: [MatTableModule]

Changes in TS file:

ELEMENT_DATA: any[] = [
    {
        Id: 1,
        Name: "Test"
    },
    {
        Id: 2,
        Name: "Beispiel"
    },
    {
        Id: 3,
        Name: "Sample"
    }
];
displayedColumns: string[] = ['Id', 'Name'];
dataSource = this.ELEMENT_DATA;

And in HTML file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="Id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.Id}} </td>
  </ng-container>
  <ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>