Display Data in common Angular Material Table

To display the provided data in a common Angular Material table, you need to implement an Angular component that uses the Angular Material table component ().

Sample Typescript Code:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-mat-table',
  templateUrl: './dynamic-mat-table.component.html',
  styleUrls: ['./dynamic-mat-table.component.css']
})
export class DynamicMatTableComponent implements OnInit {
  @Input() lstData: any[] = [];
  @Input() columns: any[] = [];

  displayedColumns: string[] = [];

  ngOnInit(): void {
    this.displayedColumns = this.columns.map(col => col.columnDef);
  }
}

Html Code:

  
      


    
    
 {{ column.header }} 
      
 {{ element[column.columnDef] }} 
    

    

    

  

Use the Created Component in your Existing Component

Thanks!!