Dynamic Data in Angular Material table

To dynamically display headers and columns in an Angular Material table, you can utilize the @Input decorator in Angular. By passing the header and grid data from the parent component to the child component, you can dynamically populate the table.

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

@Component({
  selector: 'app-dynamic-table',
  template: `
    
        
          

      
{{ header }}
          
{{ element[header] }}
        
      

      

      

    
  `,
})
export class DynamicTableComponent {
  @Input() arrHeader: any = [];
  @Input() arrGrid: any = [];
}

The DynamicTableComponent receives arrHeader for headers and arrGrid for grid data. By iterating over arrHeader and dynamically creating columns, you can achieve a dynamic Angular Material table.