Angular material table with form array

Question

Create a form with angular material table having table row data as input fields. There is an add row button which enables to add new row to the table. On clicking the submit button emit the table data back to the parent component

This is my html code

<div class="flex-end-container">
    <button mat-raised-button color="primary" class="button" (click)="addRow()">
      <mat-icon matPrefix>add</mat-icon>
      New Row
    </button>
  </div>
<form role="form" [formGroup]="dutyChartForm">
<table mat-table [dataSource]="dataSource1" >
<!-- Position Column -->
<ng-container matColumnDef="memberType">
  <th mat-header-cell class="header-row-border" *matHeaderCellDef>
    Select Staff
  </th>
  <td mat-cell *matCellDef="let element">
    <mat-form-field class="common-input" appearance="outline">
      <mat-select formControlName="memberType"  placeholder="Member Type">
        @for (data of memberTypeList; track data) {
          <mat-option [value]="data.value">{{data.viewValue}}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </td>
</ng-container>

<!-- Name Column -->
@for (column of weekColumns; track column) {
<ng-container matColumnDef="{{ column }}" >
  <th mat-header-cell class="header-row-border" *matHeaderCellDef>
    {{ column | titlecase }}
  </th>
  <td mat-cell *matCellDef="let element">
    <!-- {{ element[column] }} -->
    <mat-form-field
      class="common-input input-field"
      floatLabel="always"
      appearance="outline"
    >
      <input matInput id="{{column}}" formControlName="{{column}}" />
    </mat-form-field>
  </td>
</ng-container>

}
<tr 
  mat-header-row
  class="header-row"
  *matHeaderRowDef="displayedColumns1"
></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns1;let i = index" [formGroupName]="i"></tr>
</table>
</form>