title: How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!
body: <p>THIS IS MY TS FILE</p>
  
  <pre><code>  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 =&gt; {
            this.resData = resViewData;
            this.keys = Object.keys(resViewData[0])
  
          });
        }
  
        toggle() {
          this.show = !this.show
        }
        ngOnInit() {
  
        }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;--! THIS IS MY HTML--&gt;
  
  &lt;table *ngIf='show'&gt;
  
          &lt;th *ngFor="let res of keys"&gt; 
        &lt;!-- passing data into function--&gt;
        {{res}}
            &lt;div *ngFor="let schedule_data of resData"&gt;
              {{schedule_data[res]}}
            &lt;/div&gt;
          &lt;/th&gt;
  
        &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>   [![THIS IS MY RESULT][1]][1]
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>This is my JSON
  
  [
      {
          "id": 1,
          "name": "Test"
      },
      {
          "id": 2,
          "name": "Beispiel"
      },
      {
          "id": 3,
          "name": "Sample"
      }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>**</p>
  
  <p>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!</p>
  
  <p>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!</p>