How to display data in Html

Question

Hi

  I am trying to create Dynamic table using Angular Material. What should be the Html Code. Using ANgular 17

<section class="content">
    <div class="content-block">
      <app-dynamic-mat-table [tableData]="userArray" [columnArray]="['empName','empEmail']" ></app-dynamic-mat-table> 
    </div>
</section>

export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges {
  @Input() title?: string;
  @Input() tabelData: any = [];
  @Input() columnArray: string [] = [];

  @Input() columns: any = [];
  @Input() actionColumn: any = [];
  @Input() permission: any;
  dataSource: MatTableDataSource<any>;
  
  constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource<any>([]);
    this.paginator = {} as MatPaginator;    
  }
  defaultImage:string='assets/images/icons/no-photo.png';
  ngOnInit(): void {  
   
    // this.pageSizeOptions = this._common.getPageSizeOptions();
    // this.displayedColumns = this.getDisplayedColumns();   
  }
  ngOnChanges(changes:SimpleChanges){     
    this.isLoading = true;  
    if (changes?.['tabelData'] && changes?.['tabelData'].currentValue) {    
      this.dataSource = new MatTableDataSource<any>(this.tabelData);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.isLoading = false;  
      
    } 
}

Thanks