Array for Header columns

Question

Hi

 I have below array for Header information . I want to give proper Headings to table columns. What changes need to be done in Html

arrheader = [
    {'Head': 'Category','FieldName': 'categoryName'},
    {'Head': 'Name','FieldName': 'productName'},
    {'Head': 'Description','FieldName': 'productDescription'},
    {'Head': 'Price','FieldName': 'productPrice'}
  ]

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

@Component({
  selector: 'app-dynamic-table',
  template: `
    <table mat-table [dataSource]="arrGrid">
      <ng-container *ngFor="let header of arrHeader">
        <ng-container [matColumnDef]="header">
          <th mat-header-cell *matHeaderCellDef>{{ header }}</th>
          <td mat-cell *matCellDef="let element">{{ element[header] }}</td>
        </ng-container>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="arrHeader"></tr>
      <tr mat-row *matRowDef="let row; columns: arrHeader;"></tr>
    </table>
  `,
})
export class DynamicTableComponent {
  @Input() arrHeader: any = [];
  @Input() arrGrid: any = [];
}

 

Thanks