Display Data in common Angular Material Table

Question

Hi

  I have below Html of one component. I want to display Data in a common Angular material table. How it can be done in Common table.

<section class="content">
  <div class="content-block">
    <app-dynamic-mat-table [lstData]="lstData" [columns]="columns" ></app-dynamic-mat-table> 

  </div>
</section>

<ng-template #content let-data>  
  <div mat-dialog-title>
      <h4> Product Form </h4> 
  </div>

  <form [formGroup]="frmProduct" ngSubmit="Save()"> 
      <div mat-dialog-content class="content">
          <div class="row">
              <mat-form-field appearance="outline">
                  <mat-label>Product Name</mat-label>
                  <input matInput type="text" appAlphanumeric formControlName="ProductName">
                  <mat-error *ngIf="frmProduct.get('ProductName')?.invalid && (frmProduct.get('ProductName')?.touched || frmProduct.get('firstName')?.dirty)">
                      <!-- <span *ngIf="empForm.get('firstName')?.errors?.['required']">This is required</span>
                      <span *ngIf="empForm.get('firstName')?.errors?.['minlength']">Minimum length is 4</span> -->
                  </mat-error>
              </mat-form-field> 
              <mat-form-field appearance="outline">
                  <mat-label>Product Description</mat-label>
                  <input matInput type="text" appNumeric formControlName="ProductDescription">
              </mat-form-field> 
              <mat-form-field appearance="outline">
                <mat-label>Product Image</mat-label>
                <input matInput type="text" appNumeric formControlName="ProductImageUrl">
            </mat-form-field> 
          </div>
      </div>
      <div mat-dialog-actions class="action">
          <button mat-raised-button color="warning">Cancel</button>
          <button mat-raised-button color="primary" (click)="onSave()">Save</button> 
      </div>
  </form> 
</ng-template> 

Thanks