Adding an extra row to a mat-table

Issue

So I have a mat-table

<mat-table class="table"
           cdkDropList
           cdkDropListOrientation="horizontal"
           (cdkDropListDropped)="tableDrop($event)"
           [dataSource]="tableDataSource">
  <ng-container *ngFor="let column of columns; let i = index"
                [matColumnDef]="column.name">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     dkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row">
      {{ column.title }}
    </mat-header-cell>
    <mat-cell *matCellDef="let element">
      {{ element[column.name] }}
    </mat-cell>
  </ng-container>

  <mat-header-row class="tableHeader"
                  *matHeaderRowDef="tableDisplayedColumns"                      
                  #tableHeaderRow>
  </mat-header-row>
  <mat-row class="tableRow"
           *matRowDef="let row; columns: tableDisplayedColumns;"
           [class.selected-row]="tableSelectedRows.has(row)"
           (click)="selectUnselectRow(row)">
  </mat-row>
</mat-table>

but I need to add a row under the table header for the respective row filters. I've tried adding a <mat-row> inbetween the header and actual row declaration, however since the filters are differing inputs (e.g. number, select with autocomplete, and a multiselect) I can't *ngFor them (and I'm not sure if I'd be able to)

EDIT: Forgot to post the filter HTML

<div class="filterGroup">
  <mat-form-field class="filterField">
    <input matInput
           type="number"
           (keydown)="updateManualPage(1)"
           placeholder="Filter za param1"
           formControlName="filterParam1">
  </mat-form-field>
  <mat-form-field class="filterField">
    <input matInput
           (keydown)="updateManualPage(1)"
           placeholder="Filter za param2"
           formControlName="filterParam2"
           [matAutocomplete]="autoSingleSelect">
    <mat-autocomplete #autoSingleSelect="matAutocomplete"
                      class="filterSelect"
                      panelClass="filterSelect">
      <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async"
                  [value]="option.param2">
        {{option.param2}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class="filterField">
    <mat-select class="filterMultiselect"
                placeholder="Filter za param3"
                formControlName="filterParam3"
                multiple
                panelClass="filterMultiselect">
      <mat-option *ngFor="let option of tableDataSource.data"
                  [value]="option.param3">
        {{option.param3}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

and the relevant component.ts

  tableDisplayedColumns: string[] = ['param1', 'param2', 'param3'];
  columns: any[] = [
    { name: 'param1', title: 'Param1' },
    { name: 'param2', title: 'Param2' },
    { name: 'param3', title: 'Param3' }
  ];

Solution

Just to close this question out, I managed to do it by removing the *ngFor, and putting the filters in manually.

<mat-table class="table"
           cdkDropList
           cdkDropListOrientation="horizontal"
           (cdkDropListDropped)="tableDrop($event)"
           [dataSource]="tableDataSource">
  <ng-container matColumnDef="param1">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param1
      <mat-form-field class="filterField">
        <input matInput
               type="number"
               (keydown)="updateManualPage(1)"
               placeholder="Filter"
               formControlName="filterParam1">
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param1}}</span>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="param2">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param2
      <mat-form-field class="filterField">
        <input matInput
               (keydown)="updateManualPage(1)"
               placeholder="Filter"
               formControlName="filterParam2"
               [matAutocomplete]="autoSingleSelect">
        <mat-autocomplete #autoSingleSelect="matAutocomplete"
                          class="filterSelect"
                          panelClass="filterSelect">
          <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async"
                      [value]="option.param2">
            {{option.param2}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param2}}</span>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="param3">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param3
      <mat-form-field class="filterField">
        <mat-select class="filterMultiselect"
                    placeholder="Filter"
                    formControlName="filterParam3"
                    multiple
                    panelClass="filterMultiselect">
          <mat-option *ngFor="let option of tableDataSource.data"
                      [value]="option.param3">
            {{option.param3}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param3}}</span>
    </mat-cell>
  </ng-container>

  <mat-header-row class="tableHeader"
                  *matHeaderRowDef="tableDisplayedColumns"
                  #tableHeaderRow>
  </mat-header-row>
  <mat-row class="tableRow"
           *matRowDef="let row; columns: tableDisplayedColumns;"
           [class.selected-row]="tableSelectedRows.has(row)"
           (click)="selectUnselectRow(row)">
  </mat-row>
</mat-table>

Answered By - Baltr